Recently, I am writing a blog website. I want to design an effect with a scroll bar on the top, and calculate a percentage according to the position of my scrolling page, so that the scroll bar above also scrolls to the corresponding position. But there were a few minor problems during the period, for example, why did the scroll bar increase slowly by itself when I didn't scroll the page, or the scroll bar disappeared when I scrolled to the end of the page. Brother, don’t worry, please listen to me slowly~~~
The effect is as shown in the figure:
1. Installation
npm install --save nprogress
或
yarn add nprogress
Two, use
1. As a loading progress bar,
introduce nprogress in the Vue entry file main.js
Note here: minimum must be 0, otherwise there will be an auto-increment phenomenon
import NProgress from 'nprogress' //引入 nprogress 插件
NProgress.configure({
showSpinner: false});
NProgress.configure({
minimum:0});
NProgress.configure({
ease:'linear',speed:100});
Load when switching routes (also in main.js)
//当路由进入前
router.beforeEach((to, from, next) => {
// 每次切换页面时，调用进度条
NProgress.start();
// 这个一定要加，没有next()页面不会跳转的。这部分还不清楚的去翻一下官网就明白了
next();
});
//当路由进入后：关闭进度条
router.afterEach(() => {
// 在即将进入新的页面组件前，关闭掉进度条
NProgress.done()
})
2. As a page scrolling progress bar
Note in App.vue
: In the css style, the following style must be added, otherwise the following 'bug' will appear
#nprogress .peg {
box-shadow: 0 0 10px #dd181800, 0 0 5px #c2282800 !important;
}
As shown in the picture:
You can see an inexplicable square with an angle appearing on the head of the scroll bar, which is really a headache
<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>
3. Configuration items
1. Change the default style:
in App.vue
<style>
#nprogress .bar{
//自定义进度条颜色
background: orange !important;
}
#nprogress .peg {
// 自定义辅助阴影颜色，这里默认为透明
box-shadow: 0 0 10px #00000000, 0 0 5px #00000000 !important;
}
</style>
2. Configure NProgress:
showSpinner: Show and hide the progress ring
NProgress.configure({
showSpinner: false});
ease: Adjust animation settings, ease can pass CSS3 buffer animation strings (such as ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier). speed is the animation speed (in ms)
NProgress.configure({
ease:'ease',speed:1000});
minimum: Set the minimum percentage of the progress bar
NProgress.configure({
minimum:0.0});
Percentage: By setting the percentage of progress, call .set(n) to control the progress, where the value range of n is 0-1
NProgress.set(0.4);
Fourth, read the source code to solve the above problems
Find the nprogress folder in node_modules,
find the nprogress.js file, and modify the following content to solve the problem that the scroll bar disappears when it scrolls to the end.
Of course, you can also see the default style of the scroll bar under the css folder, and you can see# A rotating style is indeed added to nprogress .peg
