Skip to content

108.添加全局顶部进度条

大家好~我是米洛！
我正在从0到1打造一个开源的接口测试平台, 也在编写一套与之对应的教程，希望大家多多支持。
欢迎关注我的公众号米洛的测开日记，获取最新文章教程!

回顾

上一节我们完成了用例统计相关内容，随着功能点的渐渐完善。我们也得更注重一下用户体验，今天我们就来讲下如何完成全局顶部进度条功能。

顶部进度条

经常逛github的朋友，应该都看到过这样的进度条，我们来看看gif回忆下:

注意到顶部的蓝色进度条了吗？这个就是我们今天要搞定的部分。

虽然Ant Design Pro已经有了全局的loading，但是其实我个人是觉得那个效果太粗鲁了，顶部进度条相对来说会温和一点。

组件选型

其实在antd官网有个精选组件的页面，大家有类似需求都可以去那边看看有没有合适的，毕竟人官网都推荐的，那肯定不会差到哪去。

我们在推荐组件里面找到这样一个组件: nprogress

既然只有一个，那就它了。（毕竟也好像没得选了）

研究下api

api很简单:

import后start，等页面加载完毕了调用done方法即可。

改造BasicLayout

因为我们整个页面虽然看起来是动态的，但其实是在不断更换BasicLayout的chidren，而登录页面虽然是UserLayout，但好像也没啥好loading的，所以我们只需要改造BasicLayout这个基本组件即可。

思路也很简单，设定一个href变量，判断当前的路由与href是否相等，如果不相等则说明url在变化，也就是页面在切换，这样的话就调用滚动条的start和done方法。

那什么时候调用done呢？

我们知道用dva的connect连接起来的组件，天然就带有dispatch方法。

而我们loading也是自带的组件，在loading变量里面有个global变量，如果为true代表页面整体还未加载完成。

所以简单点说的话，我们通过设置一个变量href检测是否有页面更新操作，有的话立马调用start方法，接着等global为false，则调用done方法。

开始改造

如果没有安装的话，可以先安装一下nprogress:

npm install nprogress --save
  1. 在src/layout/BasicLayout.jsx引入Nprogress
import NProgress from "nprogress";
import 'nprogress/nprogress.css'

引入核心方法和样式。

  1. 配置loading标志
NProgress.configure({showSpinner: true});

这一步的目的是为了在进度条最右侧展示loading标志，更明显一点，不加这步也没问题。

  1. 在connect处带入loading
export default connect(({global, settings, loading}) => ({
  collapsed: global.collapsed,
  settings,
  ld: loading,
}))(BasicLayout);

注意，我这里用ld变量替代了loading，因为发现变量名叫loading的话可能和umi默认的值产生冲突（umi也有全局loading判断），所以我换成ld了之后正常了。

  1. 方法体里面加入如下代码
// 设置当前路由的值，默认为空字符串
// 为空字符串的话，肯定和url不一致，所以第一次肯定会生效，后续就是修改生效
const [currentHref, setCurrentHref] = useState('');
// 从props获取到loading->ld
const {ld} = props;
// 获取当前路由
const {href} = window.location;
if (currentHref !== href) {
  // 加载进度条
  NProgress.start();
  // 当global为false，说明加载完毕，直接done
  if (!ld.global) {
    NProgress.done();
    // 更新当前路径
    setCurrentHref(href);
  }
}

我们来看下效果，主要也就是看切换菜单和刷新页面的时候，进度条是否正常:

大致上没啥出入，作为一个要求不是很高的"前端"，做到这个效果已经可以了。

想起之前是每个请求前start，请求结束执行done，对比起来确实也方便多了。

今天的内容就分享到这里了，感谢大家的收看。