Github Star: 26k[1] 官網[2]
NProgress 是什么？
NProgress.js 是一個輕量級的 JavaScript 庫，用于在應用的頁面頂部顯示一個進度條，指示頁面加載或異步操作的進度。它非常適合用于單頁面應用程序（SPA），能夠在路由變化時給用戶友好的加載提示。本文是 NProgress.js 的基本使用方法和一些配置選項的詳細介紹。
快速開始
安裝和引入
NProgress.js 支持管理工具 npm 或 yarn 安裝，也支持 CDN 引入。
npm install nprogress -S
#
yarn add nprogress
引入時，別忘了引入 nprogress.css 樣式文件
啟動和結束進度條
NProgress.start(); // 啟動進度條
NProgress.done(); // 結束進度條
設置進度
NProgress.set(0.4); // 設置進度至 40%
設置進度百分比，參數取值 0 ~ 1 之間。如果傳 0 類似于調用 .start()，傳 1 類似于調用 .done() 方法。
遞增進度條
NProgress.inc(); // 隨機遞增進度條
NProgress.inc(0.2); // 以 0.2 的值遞增進度條
遞增進度條，以隨機量增加，永遠不會到達 100%。
配置選項
NProgress.configure({
easing: 'ease', // 動畫方式
speed: 500, // 遞增進度條的速度
showSpinner: false, // 是否顯示加載指示器
trickle: false, // 是否開啟自動遞增行為
trickleSpeed: 200, // 自動遞增間隔
minimum: 0.3, // 更改啟動時使用的最小百分比
parent: 'body', // 指定進度條的父容器
barSelector: '[role="bar"]', // 進度條選擇器
spinnerSelector: '[role="spinner"]' // 加載指示器選擇器
});
配置項還有 template 自定義模板，為了保證正常工作，需要保留一個帶 role='bar' 的元素。參考默認模板。
NProgress.configure({
template: `
<div class="bar" role="bar">
<div class="peg"></div>
</div>
<div class="spinner" role="spinner">
<div class="spinner-icon"></div>
</div>`
})
另外，通過覆蓋 nprogress.css 樣式，可以實現定制化樣式。
在 Vue 中使用
在 Vue 項目中，可以將 NProgress.js 集成到路由系統中，方便頁面跳轉時顯示進度條。在 router/index.js 中引入 NProgress 并在路由衛士中調用相應的 API。
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 導入進度條
import { start, close } from '../utils/nprogress';
const router = new VueRouter({
// ...
});
router.beforeEach((to, from, next) => {
NProgress.start();
next();
});
router.afterEach(() => {
NProgress.done();
});
修改進度條樣式
通過添加 CSS 樣式來自定義進度條的顏色和其他視覺效果。
#nprogress .bar {
background: green !important; /* 自定義顏色 */
}
總結
NProgress.js 使用一種簡單的方式來改善用戶體驗，在單頁應用中，通過在頁面跳轉期間顯示進度條，可以讓用戶知道頁面正在加載，從而減少用戶的等待焦慮感。通過本文相信你已經能夠在項目中輕松使用 NProgress.js 了。
祝好！
引用鏈接
[1] Github Star: 26k: https://github.com/rstacruz/nprogress
[2] 官網: https://ricostacruz.com/nprogress/
該文章在 2024/10/12 10:18:19 編輯過
400 186 1886
