diff --git a/src/pages/Mobile/Blog.jsx b/src/pages/Mobile/Blog.jsx index 55fe5c63..c972d595 100644 --- a/src/pages/Mobile/Blog.jsx +++ b/src/pages/Mobile/Blog.jsx @@ -1,32 +1,41 @@ -import React, {useEffect, useRef, useState} from "react"; -import {Collapse, DotLoading, Toast} from 'antd-mobile' +import React, {useEffect, useState} from "react"; +import {Collapse, DotLoading} from 'antd-mobile' import Md from "../../compontets/Md"; import {blogMenu} from "../../store/NoLoginData"; import {blogBaseURL, getBlogItemIconObj, getBlogList, getBlogMd} from "../../request/blogRequest"; +import LoaderWhite from "../../compontets/common/LoaderWhite"; +let menu = blogMenu; // 菜单项 +let icon = {} // 图标 +let initLoad = true // 初始加载菜单状态 +let sxIndex = 0 // 刷新页面状态变量 export default () => { - const [menu, setMenu] = useState(blogMenu) // 菜单项 - const [icon, setIcon] = useState({}) // 图标 - - const loading = useRef() // 显示加载中 - + const [, setSxYm] = useState(0) // 刷新页面状态 + const sxYm = () => setSxYm(++sxIndex) + + /** 初始化获取最新菜单和图标 */ useEffect(() => { - loading.current = Toast.show({icon: 'loading', content: '数据加载中...', duration: 0}) - getBlogItemIconObj().then(obj => { - setIcon(obj) - loading.current?.close() // 关闭加载蒙版 - getBlogList().then(data => setMenu(data)) - }).catch(() => Toast.show({icon: 'fail', content: '数据加载失败'})) + init() }, []) - + + const init = async () => { + try { + icon = await getBlogItemIconObj(); + menu = await getBlogList(); + } finally { + sxYm(initLoad = false) + } + } + /** 构建菜单 */ const buildMenu = blogMenu => { blogMenu.map(itemList => - 图标 {itemList[0]}}> + 图标 {itemList[0]}}> {itemList.slice(1).map(item => @@ -38,15 +47,15 @@ export default () => { ) } - - return buildMenu(menu) + + return initLoad ? : buildMenu(menu) } /** 异步内容组件 */ const DynamicContent = ({keyPath}) => { const [finished, setFinished] = useState(false) const [content, setContent] = useState('# 欢迎来到仰晨博客'); - + useEffect(() => { getBlogMd(keyPath).then(data => { setContent(data) @@ -54,7 +63,7 @@ const DynamicContent = ({keyPath}) => { setContent(`请求失败,请检查网络连接`) }).finally(() => setFinished(true)) }, []) - + return finished ?
{content}