NProgress.js+Axios模仿YouTube顶部加载条(超小的全局顶部进度条)

·  阅读 2513
NProgress.js+Axios模仿YouTube顶部加载条(超小的全局顶部进度条)

一、前语

用过的所有进度条中,还是觉得这个非常的奥利给!
复制代码

二、用法

安装(npm)

npm install --save nprogress

基本用法

  1. 显示进度条-NProgress.start()
  2. 设置百分比-NProgress.set()
  3. 增加一点点-NProgress.inc()
  4. 结束进度条-NProgress.done()

基本配置

  1. 通过 minimum 来修改最小百分比-NProgress.configure({ minimum: 0.1 })
  2. 通过 ease(一个 CSS 中的 easing 值) 调整动画设置和速度 speed (毫秒ms)-NProgress.configure({ ease: 'ease', speed: 500 })
  3. 关闭进度条步进,设置 trickle 为 false-NProgress.configure({ trickle: false })
  4. 调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔,单位毫秒ms)- NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 })
  5. 禁用进度环,设置 showSpinner 为false-NProgress.configure({ showSpinner: false })

三、配合Axios(部分代码)

//导入封装axios的文件
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

//配置进度条参数
NProgress.configure({ showSpinner: false, minimum: 0.2, easeing: 'swing', speed: 1000, trickleRate: 0.2 });

//防止多次请求进度条重复加载
    let loadingNum = 0;
    function startLoading() {
      if (loadingNum == 0) {
        NProgress.start()
      }
      loadingNum++;
    }
    function endLoading() {
      loadingNum--
      if (loadingNum <= 0) {
        NProgress.done()
      }
    }
       

// 请求拦截
axios.interceptors.request.use(
  config => {
    // 加载进度条
    startLoading()
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截
axios.interceptors.response.use(
  response => {
  //结束进度条
    endLoading()
    return response;
  },
  error => {
    return Promise.reject(error);
 }
);

复制代码

Tips:如果想修改进度条颜色,可在app.vue样式中加入 #nprogress .bar { background: #F8C23B !important; }

结语

有兴趣的话可以进官网查看,或者去GitHub给他点个star,希望对你有所帮助

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改