최근에 블로그 웹사이트를 작성하고 있는데 상단에 스크롤바를 적용한 효과를 디자인하고 스크롤 페이지의 위치에 따라 백분율을 계산하여 상단의 스크롤바도 해당 위치로 스크롤되도록 하고 싶습니다. 하지만 그 기간 동안 몇 가지 사소한 문제가 있었습니다. 예를 들어, 페이지를 스크롤하지 않을 때 왜 스크롤 막대가 저절로 느리게 커지거나, 페이지 끝으로 스크롤하면 스크롤 막대가 사라지는 것이었습니다. 형님 걱정하지 마세요 천천히 들어주세요 ~~
효과는 그림과 같습니다.
1. 설치
npm install --save nprogress
或
yarn add nprogress
둘, 사용
1. 로딩 진행률 표시줄로
Vue 항목 파일 main.js에 nprogress를 도입합니다
. 참고: 최소값은 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 스타일에서 다음 스타일을 추가해야 합니다. 그렇지 않으면 다음 '버그'가 나타납니다.
#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>
3. 구성 항목
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});
용이성: 애니메이션 설정을 조정합니다. 용이성은 CSS3 버퍼 애니메이션 문자열(예: 용이성, 선형, 완화, 완화, 완화, 입방 베지어)을 전달할 수 있습니다. speed는 애니메이션 속도(ms)입니다.
NProgress.configure({
ease:'ease',speed:1000});
최소: 진행률 표시줄의 최소 비율을 설정합니다.
NProgress.configure({
minimum:0.0});
백분율: 진행률을 설정하여 .set(n)을 호출하여 진행률을 제어합니다. 여기서 n의 값 범위는 0-1입니다.
NProgress.set(0.4);
넷째, 위의 문제를 해결하려면 소스 코드를 읽으십시오.
node_modules에서 nprogress 폴더를 찾아
nprogress.js 파일을 찾아 다음 내용을 수정하여 스크롤바를 끝까지 스크롤하면 사라지는 문제를 해결합니다
. css 폴더를 보면 # 회전 스타일이 실제로 nprogress .peg에 추가된 것을 볼 수 있습니다.
