vue頁面加載時的進度條功能(實例代碼)

 更新時間:2020年01月13日 15:52:57   作者:忽略我的表情   我要評論
這篇文章主要介紹了vue頁面加載時的進度條功能,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下

先看一張圖

如果我們的程序每次頁面切換時,頂部也有一個進度條,那會讓用戶體驗提升很大的。

npropgress插件

github地址

簡單用法 - Vue 項目為例(詳細配置,點擊上面的github地址查看文檔)

最簡單的使用方式:vue項目的每次路由切換時,都加載進度條

安裝

npm install --save nprogress

引入

在路由配置文件中引入,寫到路由加載前和加載后的兩個鉤子函數中

// 引入
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
// 進度條配置項這樣寫
NProgress.configure({
 showSpinner: false
});
// 路由跳轉前鉤子函數中 - 執行進度條開始加載
router.beforeEach((to, from, next) => {
 NProgress.start();
});
// 路由跳轉后鉤子函數中 - 執行進度條加載結束
router.afterEach(() => {
 NProgress.done();
});

如果是 cdn 引入的話,如下

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

設置進度條顏色

如果是一般的 vue 項目,把樣式放到一個css文件中,在項目主文件main.js中引入,下面是 css 樣式

#nprogress .bar {
 background: #00CC00 !important; //自定義顏色
}

配置項

手動控制進度條遞增,參數范圍是0 - 1,不傳參數的話,每次調用都會隨機遞增,但永遠不會到達 100% ,除非調用NProgress.done();

// 調用之前如果進度條的狀態 50%
NProgress.inc(0.2);
// 調用之后 70%

進度條加載完成

帶參數true:即使沒有調用NProgress.start(),也會顯示并執行進度條從 0% - 100% 的狀態,然后消失。
不帶參數:如果沒有調用NProgress.start(),那么此命令不會執行任何操作。

NProgress.done(true);

啟動進度條時的最小百分比(默認為 0.08)

NProgress.configure({
 minimum: 0.3
});

可以使用模板更改標記。要保持進度條正常工作,要在其中保留一個role='bar'元素,參考默認模板。

// 默認模板
NProgress.configure({
 template: "<div class='....'>...</div>"
});

// 舉例
NProgress.configure({
 template: "<div class='other-instance'><div role='bar'>更改標記</div></div>"
})

使用 easing 和 speed 調整動畫設置,ease可傳遞CSS3緩沖動畫字符串(如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier),speed為動畫速度(單位ms)。默認分別為 ease 200

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

關閉自動遞增行為

NProgress.configure({
 trickle: false
});

調整遞增的頻率,單位為毫秒

NProgress.configure({
 trickleSpeed: 200
});

關閉微調器,默認為開啟狀態(上圖中右上角的那個圓圈加載圖標)

NProgress.configure({
 showSpinner: false,
});

更改父容器

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

總結

以上所述是小編給大家介紹的vue頁面加載時的進度條功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

相關文章

最新評論

pc蛋蛋幸运28app下载地址