0
点赞
收藏
分享

微信扫一扫

带你玩转NProgress进度条

TiaNa_na 2022-05-01 阅读 149
js前端

文章开始前先附上:NProgress官网和Github地址

安装

使用npm安装

npm install --save nprogress

使用文件引入:

下载Github里文件:
在这里插入图片描述

引入下载的文件:

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

CDN引入:

  • https://unpkg.com/nprogress@0.2.0/nprogress.js
  • https://unpkg.com/nprogress@0.2.0/nprogress.css

基本用法

引入

import NProgress from "nprogress";
import "nprogress/nprogress.css";

开关和关闭

start()开启NProgress进度条
done()关闭NProgress进度条

NProgress.start();
NProgress.done();

高级用法

百分比

要设置进度百分比,可调用set(n) ,其中 n 介于0和1 之间

NProgress.set(0.0);     // 相当于 .start()
NProgress.set(0.4);
NProgress.set(1.0);     // 相当于 .done()

递增

使用inc(n)设置递增进度条,递增时永远不会到达100%,其中n为自设的递增值,如果不传入n,则将以随机量递增

NProgress.inc(0.4);

获取状态值

使用status()

 console.log(NProgress.status());

配置

最小值:minimum

更改启动时使用的最小百分比。(默认值:0.08)

NProgress.configure({ minimum: 0.1 });

缓动:easing 速度:speed

使用缓动(CSS 缓动字符串)和速度(以毫秒为单位)调整动画设置。(默认值:ease和200)

NProgress.configure({ easing: 'ease', speed: 500 });

关闭递增:trickle

通过将其设置为false来关闭自动递增行为。(默认值:true)

NProgress.configure({ trickle: false });

递增频率:trickleSpeed

调整涓流/增量的频率,以毫秒为单位。

NProgress.configure({ trickleSpeed: 200 });

圆圈加载:showSpinner

showSpinner用来控制是否显示进度条右下方加载的小圆圈动画
通过将加载微调器设置为 false 来关闭它。(默认值:true)

NProgress.configure({ showSpinner: false });

父容器:parent

指定此选项可更改父容器。(默认值:body)

NProgress.configure({ parent: '#container' });

修改样式:

// 自定义进度条颜色
 #nprogress .bar {
     background: #333 !important; //自定义颜色
  }

使用技巧

NProgress最常见的用法是在发送请求或者路由跳转里进行可视化进度展示:

以在vue中使用为例

路由跳转中使用:

import { createRouter, createWebHistory } from "vue-router";
// 引入进度条
import NProgress from "nprogress";
import "nprogress/nprogress.css";
//路由实例
const router = createRouter({
    history: createWebHistory(),
    routes: [...],
});
//导航守卫
router.beforeEach(async(to, from, next) => {
    NProgress.start();
}
router.afterEach(() => {
    NProgress.done();
});

发送请求时中使用:

import axios from "axios";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
// 进度条设置
NProgress.configure({
    easing: "ease-in-out",
    speed: 300,
    trickleSpeed: 300,
});
//创建axios的一个实例
const instance = axios.create({
		//...
});
//请求拦截器
instance.interceptors.request.use(
    (config) => {
        NProgress.start();
		//...
    },
    (error) =>{
		//...
	}
);
//响应拦截器
instance.interceptors.response.use(
    (response) => {
        //响应成功
        NProgress.done();
        //...
    },
    (error) => {
        NProgress.done();
        //...
    }
);
export default instance;

以上两种使用情景仅展示NProgress用法,路由配置和axios请求封装不做展示

举报

相关推荐

0 条评论