diff --git a/src/compontets/common/LoaderWhite.jsx b/src/compontets/common/LoaderWhite.jsx index fe7de008..ba86005f 100644 --- a/src/compontets/common/LoaderWhite.jsx +++ b/src/compontets/common/LoaderWhite.jsx @@ -1,13 +1,13 @@ import styles from './LoaderWhite.module.css' /** 自定义 加载动画 白色圈圈*/ -export default () => { +export default ({loadName = '正在玩命加载中...'}) => { return (
-
正在玩命加载中...
+
{loadName}
) } diff --git a/src/pages/Blog/index.jsx b/src/pages/Blog/index.jsx index 60eb04f9..af2027d5 100644 --- a/src/pages/Blog/index.jsx +++ b/src/pages/Blog/index.jsx @@ -34,7 +34,8 @@ const {Content, Sider} = Layout * */ const Blog = () => { const [content, setContent] = useState('# 欢迎来到仰晨博客'); - const [loading, setLoading] = useState(false) // 加载状态 + const [loading, setLoading] = useState(false) // 加载状态 + const [initLoad, setInitLoad] = useState(true) // 初始加载菜单状态 const [menu, setMenu] = useState(items(blogMenu)) // 菜单项 const [selectKey, setSelectKey] = useState([]) // 菜单选中项【子,父】 @@ -44,7 +45,7 @@ const Blog = () => { /** 页面加载菜单 (和读取URL的菜单) */ useEffect(() => { - (()=> init())() + init() }, []) /** 初始化页面加载菜单 (和读取URL的菜单) */ @@ -52,6 +53,7 @@ const Blog = () => { const blogIconObj = await getBlogItemIconObj(); // 请求获取图标 const blogList = await getBlogList(); // 请求获取最新菜单 setMenu(items(blogList, blogIconObj)) // 生成菜单并设置到state + setInitLoad(false) // ——————————————————————🟡处理带URL进来的情况🟡———————————————————————— const params = window.location.href.split('?')?.[1]; @@ -81,8 +83,8 @@ const Blog = () => { }).finally(() => setLoading(false)) } - - + + return ( {/*------- 页面左侧 -------*/} @@ -92,14 +94,17 @@ const Blog = () => { style={{overflow: 'auto'}} collapsible > - setSelectKey(l => v.length > 0 ? [l[0], v[1]] : [l[0], null])} // 点击展开菜单 - /> + {initLoad ? + + : + setSelectKey(l => v.length > 0 ? [l[0], v[1]] : [l[0], null])} // 点击展开菜单 + />} {/*------ 页面右侧 -------*/} 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}