資訊專欄INFORMATION COLUMN
摘要：可以指定一個具體值，而非增量，在之間。這是因為，使進度增加超過時，會變成，之后又從重新開始。所以，當(dāng)為時，我們停止調(diào)用。
依賴jQuery。
import nprogress from "nprogress"
import "nprogress/nprogress.css"
$("#btn-loading").on("click", function () {
nprogress.start()
setTimeout(() => {
nprogress.done()
}, 3000);
})
nprogress.start()開始加載，nprogress.done()加載完成
掛載目標(biāo)nprogress.configure({ parent: "#app" })改變進度條掛載的目標(biāo)，默認是
nprogress.configure({ parent: "#app" })
$("#btn-loading").on("click", function () {
nprogress.start()
setTimeout(() => {
nprogress.done()
}, 3000);
})
#app {
width: 350px;
border: 1px solid gray;
padding: 5px;
}
進度條動畫增量
nprogress.inc()隨機生成一個進度條的增量，nprogress.inc(n)指定一個具體增量，n在0~1之間。
nprogress.set(n)可以指定一個具體值，而非增量，n在0~1之間。
nprogress.configure({ parent: "#app" })
$("#btn-loading").on("click", function () {
nprogress.start()
var i = 0;
//使用inc()
var timer = setInterval(() => {
if(nprogress.status){
$("#inc_counter").text(i++)
$("#status_counter").text(nprogress.status)
nprogress.inc()
}else{
clearInterval(timer)
}
}, 500);
setTimeout(() => {
nprogress.done()
}, 3000);
})
invoke inc times ：
noprogress status ：
這里設(shè)置了一個定時器，每過0.5秒調(diào)用一次inc()，生成隨機增量，這里有個問題，如果少了if...else...，會變成如下這個效果。
這是因為，inc()使進度增加超過1時，nprogress.status會變成null，之后又從0重新開始。所以，當(dāng)nprogress.status為null時，我們停止調(diào)用inc()。
如果設(shè)置一個指定增量，不會有以上問題。
改變顏色如果要改變默認顏色，就要在nprogress.css文件中修改。
我復(fù)制一份nprogress.css，然后在拷貝中修改顏色，再引用這份拷貝。
// import "nprogress/nprogress.css" import "./nprogress.scss" //......
/*nprogress.scss*/ $color:#FF5983; /*原先顏色都替換成$color*/ /* ... */其他
這些配置都是在NProgress.configure(options)中的options中配置
showSpinner：true/false 是否顯示螺旋加載（就是右上角那個圈圈）
trickle：默認情況就是不使用inc()也會有默認增量，這個選項決定是否關(guān)閉這個默認增量
trickleSpeed： 默認情況下進度條增加的速度
minimum：進度條初始值
easing、speed：進度條增加時有個動畫效果，這兩個選項設(shè)置動畫的貝塞爾曲線及其增加速度，如：
nprogress.configure({ easing: "cubic-bezier", speed: 200 })
template: 這個進度是被包在一個以下這個role="bar"這個div中的，我們可以通過這個選項重寫這個div，以徹底改變默認的內(nèi)部構(gòu)造。暫時用不到。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/93983.html
摘要：前言上個月月底開源組開源了使用適配人人企業(yè)版專業(yè)版的前端工程具體詳情見人人企業(yè)版適配發(fā)布。當(dāng)然，也督促自己產(chǎn)出一篇相關(guān)的文章，來記錄這次有趣的學(xué)習(xí)之旅。 Created by huqi at 2019-5-5 13:01:14 Updated by huqi at 2019-5-20 15:57:37 前言 上個月月底@D2開源組 開源了使用 D2Admin 適配 人人企業(yè)版(專業(yè)版) 的...
摘要：開發(fā)一個完整博客流程前言前段時間剛把自己的個人網(wǎng)站寫完，于是這段時間因為事情不是太多，便整理了一下，寫了個簡易版的博客系統(tǒng)服務(wù)端用的是框架進行開發(fā)技術(shù)棧目錄結(jié)構(gòu)講解的配置文件放置代碼文件項目參數(shù)配置的文件日志打印文件項目依賴模塊 Vue + Node + Mongodb 開發(fā)一個完整博客流程 前言 前段時間剛把自己的個人網(wǎng)站寫完， 于是這段時間因為事情不是太多，便整理了一下，寫了個簡易...
閱讀 924·2021-11-25 09:43
閱讀 3742·2021-11-19 09:40
閱讀 969·2021-09-29 09:34
閱讀 1898·2021-09-26 10:21
閱讀 938·2021-09-22 15:24
閱讀 4296·2021-09-22 15:08
閱讀 3325·2021-09-07 09:58
閱讀 2836·2019-08-30 15:55
