資訊專欄INFORMATION COLUMN
摘要：可以指定一個(gè)具體值，而非增量，在之間。這是因?yàn)?，使進(jìn)度增加超過時(shí)，會變成，之后又從重新開始。所以，當(dāng)為時(shí)，我們停止調(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" })改變進(jìn)度條掛載的目標(biāo)，默認(rèn)是
nprogress.configure({ parent: "#app" })
$("#btn-loading").on("click", function () {
nprogress.start()
setTimeout(() => {
nprogress.done()
}, 3000);
})
#app {
width: 350px;
border: 1px solid gray;
padding: 5px;
}
進(jìn)度條動畫增量
nprogress.inc()隨機(jī)生成一個(gè)進(jìn)度條的增量，nprogress.inc(n)指定一個(gè)具體增量，n在0~1之間。
nprogress.set(n)可以指定一個(gè)具體值，而非增量，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è)置了一個(gè)定時(shí)器，每過0.5秒調(diào)用一次inc()，生成隨機(jī)增量，這里有個(gè)問題，如果少了if...else...，會變成如下這個(gè)效果。
這是因?yàn)椋?b>inc()使進(jìn)度增加超過1時(shí)，nprogress.status會變成null，之后又從0重新開始。所以，當(dāng)nprogress.status為null時(shí)，我們停止調(diào)用inc()。
如果設(shè)置一個(gè)指定增量，不會有以上問題。
改變顏色如果要改變默認(rèn)顏色，就要在nprogress.css文件中修改。
我復(fù)制一份nprogress.css，然后在拷貝中修改顏色，再引用這份拷貝。
// import "nprogress/nprogress.css" import "./nprogress.scss" //......
/*nprogress.scss*/ $color:#FF5983; /*原先顏色都替換成$color*/ /* ... */其他
這些配置都是在NProgress.configure(options)中的options中配置
showSpinner：true/false 是否顯示螺旋加載（就是右上角那個(gè)圈圈）
trickle：默認(rèn)情況就是不使用inc()也會有默認(rèn)增量，這個(gè)選項(xiàng)決定是否關(guān)閉這個(gè)默認(rèn)增量
trickleSpeed： 默認(rèn)情況下進(jìn)度條增加的速度
minimum：進(jìn)度條初始值
easing、speed：進(jìn)度條增加時(shí)有個(gè)動畫效果，這兩個(gè)選項(xiàng)設(shè)置動畫的貝塞爾曲線及其增加速度，如：
nprogress.configure({ easing: "cubic-bezier", speed: 200 })
template: 這個(gè)進(jìn)度是被包在一個(gè)以下這個(gè)role="bar"這個(gè)div中的，我們可以通過這個(gè)選項(xiàng)重寫這個(gè)div，以徹底改變默認(rèn)的內(nèi)部構(gòu)造。暫時(shí)用不到。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93983.html
摘要：由命名路由與子路由構(gòu)成整體結(jié)構(gòu)，我們用它構(gòu)建如下頁面。以下兩張圖說明路由和子路由是如何工作的。繼續(xù)修改好友信息的路由部分添加好友信息為組件添加動態(tài)路由為動態(tài)路由添加為路徑參數(shù)添加數(shù)據(jù)下發(fā)為組件添加，并使用它。 不使用vue-router的情況 代碼官方給出下面的例子在不使用vue-router的情況下來實(shí)現(xiàn)一個(gè)路由。該示例結(jié)合了H5歷史管理API、單文件組件、JS模塊相關(guān)內(nèi)容來實(shí)現(xiàn)路由...
摘要：前言上個(gè)月月底開源組開源了使用適配人人企業(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 前言 上個(gè)月月底@D2開源組 開源了使用 D2Admin 適配 人人企業(yè)版(專業(yè)版) 的...
摘要：開發(fā)一個(gè)完整博客流程前言前段時(shí)間剛把自己的個(gè)人網(wǎng)站寫完，于是這段時(shí)間因?yàn)槭虑椴皇翘?，便整理了一下，寫了個(gè)簡易版的博客系統(tǒng)服務(wù)端用的是框架進(jìn)行開發(fā)技術(shù)棧目錄結(jié)構(gòu)講解的配置文件放置代碼文件項(xiàng)目參數(shù)配置的文件日志打印文件項(xiàng)目依賴模塊 Vue + Node + Mongodb 開發(fā)一個(gè)完整博客流程 前言 前段時(shí)間剛把自己的個(gè)人網(wǎng)站寫完， 于是這段時(shí)間因?yàn)槭虑椴皇翘?，便整理了一下，寫了個(gè)簡易...
閱讀 862·2021-11-25 09:43
閱讀 3692·2021-11-19 09:40
閱讀 898·2021-09-29 09:34
閱讀 1814·2021-09-26 10:21
閱讀 887·2021-09-22 15:24
閱讀 4208·2021-09-22 15:08
閱讀 3285·2021-09-07 09:58
閱讀 2709·2019-08-30 15:55
