最近在写一个博客网站，我想设计一个上方有滚动条的效果，根据我滚动页面的位置计算出一个百分比，从而上方滚动条也滚动到相对应的位置。但是期间出现了几个小毛病，例如我没有滚动页面为什么滚动条会自己慢慢的增加着走呢，或者滚动到页面最后面滚动条就自己消失了。兄台莫急，请听我慢慢道来~~~
效果如图：
一、安装
npm install --save nprogress
或
yarn add nprogress
二、使用
1. 作为加载进度条
在Vue入口文件 main.js 中引入 nprogress
此处注意： minimum必须为0，否则就会出现自增的现象
import NProgress from 'nprogress' //引入 nprogress 插件
NProgress.configure({
showSpinner: false});
NProgress.configure({
minimum:0});
NProgress.configure({
ease:'linear',speed:100});
切换路由时进行加载（也是在main.js中）
//当路由进入前
router.beforeEach((to, from, next) => {
// 每次切换页面时，调用进度条
NProgress.start();
// 这个一定要加，没有next()页面不会跳转的。这部分还不清楚的去翻一下官网就明白了
next();
});
//当路由进入后：关闭进度条
router.afterEach(() => {
// 在即将进入新的页面组件前，关闭掉进度条
NProgress.done()
})
2. 作为页面滚动进度条
在 App.vue 中
注意： 在css样式中，一定得把下面这个样式加上否则会出现下面这种‘bug’
#nprogress .peg {
box-shadow: 0 0 10px #dd181800, 0 0 5px #c2282800 !important;
}
如图：
可以看到滚动条头部出现莫名其妙的一个有了角度的方块，真是让人头疼
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
import NProgress from "nprogress"; // 导入nprogress（因为在main.js 中已经导入样式，这里不需要再次导入）
export default {
name: "App",
mounted() {
window.addEventListener("scroll", this.handleScroll); // 监听滚动条事件
},
methods: {
handleScroll() {
// 屏幕剩余的高度
let surplus =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;
// 当前滑动高度
let scrollY = document.documentElement.scrollTop;
// 当前位置百分比小数
let coorY = scrollY / surplus;
// 设置导航栏，这里使用NProgress.set() 动态更改进度条
NProgress.set(coorY);
},
},
};
</script>
<style>
#nprogress .bar {
background: orange !important;
height: 3px !important;
}
#nprogress .peg {
box-shadow: 0 0 10px #dd181800, 0 0 5px #c2282800 !important;
}
</style>
三、配置项
1. 更改默认样式：
在 App.vue 中
<style>
#nprogress .bar{
//自定义进度条颜色
background: orange !important;
}
#nprogress .peg {
// 自定义辅助阴影颜色，这里默认为透明
box-shadow: 0 0 10px #00000000, 0 0 5px #00000000 !important;
}
</style>
2. 配置NProgress：
showSpinner：进度环显示隐藏
NProgress.configure({
showSpinner: false});
ease：调整动画设置，ease可传递CSS3缓冲动画字符串（如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier）。speed为动画速度（单位ms）
NProgress.configure({
ease:'ease',speed:1000});
minimum：设置进度条最低百分比
NProgress.configure({
minimum:0.0});
百分比：通过设置progress的百分比，调用 .set(n)来控制进度，其中n的取值范围为0-1
NProgress.set(0.4);
四、阅读源码解决上面问题
在node_modules中找到nprogress文件夹
找到nprogress.js文件，修改以下内容就能解决滚动条滚动到最后就自己消失的毛病
当然你也能在css文件夹下看的滚动条的默认样式，同时能看见#nprogress .peg中确实加了个旋转的样式
