資訊專(zhuān)欄INFORMATION COLUMN
摘要：可以指定一個(gè)具體值，而非增量，在之間。這是因?yàn)?，使進(jìn)度增加超過(guò)時(shí)，會(huì)變成，之后又從重新開(kāi)始。所以，當(dāng)為時(shí)，我們停止調(diào)用。
依賴(lài)jQuery。
import nprogress from "nprogress"
import "nprogress/nprogress.css"
$("#btn-loading").on("click", function () {
nprogress.start()
setTimeout(() => {
nprogress.done()
}, 3000);
})
nprogress.start()開(kāi)始加載，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)度條動(dòng)畫(huà)增量
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í)器，每過(guò)0.5秒調(diào)用一次inc()，生成隨機(jī)增量，這里有個(gè)問(wèn)題，如果少了if...else...，會(huì)變成如下這個(gè)效果。
這是因?yàn)椋?b>inc()使進(jìn)度增加超過(guò)1時(shí)，nprogress.status會(huì)變成null，之后又從0重新開(kāi)始。所以，當(dāng)nprogress.status為null時(shí)，我們停止調(diào)用inc()。
如果設(shè)置一個(gè)指定增量，不會(huì)有以上問(wèn)題。
改變顏色如果要改變默認(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()也會(huì)有默認(rèn)增量，這個(gè)選項(xiàng)決定是否關(guān)閉這個(gè)默認(rèn)增量
trickleSpeed： 默認(rèn)情況下進(jìn)度條增加的速度
minimum：進(jìn)度條初始值
easing、speed：進(jìn)度條增加時(shí)有個(gè)動(dòng)畫(huà)效果，這兩個(gè)選項(xiàng)設(shè)置動(dòng)畫(huà)的貝塞爾曲線及其增加速度，如：
nprogress.configure({ easing: "cubic-bezier", speed: 200 })
template: 這個(gè)進(jìn)度是被包在一個(gè)以下這個(gè)role="bar"這個(gè)div中的，我們可以通過(guò)這個(gè)選項(xiàng)重寫(xiě)這個(gè)div，以徹底改變默認(rèn)的內(nèi)部構(gòu)造。暫時(shí)用不到。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/93983.html
摘要：由命名路由與子路由構(gòu)成整體結(jié)構(gòu)，我們用它構(gòu)建如下頁(yè)面。以下兩張圖說(shuō)明路由和子路由是如何工作的。繼續(xù)修改好友信息的路由部分添加好友信息為組件添加動(dòng)態(tài)路由為動(dòng)態(tài)路由添加為路徑參數(shù)添加數(shù)據(jù)下發(fā)為組件添加，并使用它。 不使用vue-router的情況 代碼官方給出下面的例子在不使用vue-router的情況下來(lái)實(shí)現(xiàn)一個(gè)路由。該示例結(jié)合了H5歷史管理API、單文件組件、JS模塊相關(guān)內(nèi)容來(lái)實(shí)現(xiàn)路由...
摘要：前言上個(gè)月月底開(kāi)源組開(kāi)源了使用適配人人企業(yè)版專(zhuān)業(yè)版的前端工程具體詳情見(jiàn)人人企業(yè)版適配發(fā)布。當(dāng)然，也督促自己產(chǎn)出一篇相關(guān)的文章，來(lái)記錄這次有趣的學(xué)習(xí)之旅。 Created by huqi at 2019-5-5 13:01:14 Updated by huqi at 2019-5-20 15:57:37 前言 上個(gè)月月底@D2開(kāi)源組 開(kāi)源了使用 D2Admin 適配 人人企業(yè)版(專(zhuān)業(yè)版) 的...
摘要：開(kāi)發(fā)一個(gè)完整博客流程前言前段時(shí)間剛把自己的個(gè)人網(wǎng)站寫(xiě)完，于是這段時(shí)間因?yàn)槭虑椴皇翘?，便整理了一下，?xiě)了個(gè)簡(jiǎn)易版的博客系統(tǒng)服務(wù)端用的是框架進(jìn)行開(kāi)發(fā)技術(shù)棧目錄結(jié)構(gòu)講解的配置文件放置代碼文件項(xiàng)目參數(shù)配置的文件日志打印文件項(xiàng)目依賴(lài)模塊 Vue + Node + Mongodb 開(kāi)發(fā)一個(gè)完整博客流程 前言 前段時(shí)間剛把自己的個(gè)人網(wǎng)站寫(xiě)完， 于是這段時(shí)間因?yàn)槭虑椴皇翘啵阏砹艘幌?，?xiě)了個(gè)簡(jiǎn)易...
摘要：彈窗視頻嵌入插件幻燈片圖片切換手機(jī)端響應(yīng)式日期控件上傳圖片控件校驗(yàn)控件分頁(yè)靜態(tài)分頁(yè)動(dòng)態(tài)分頁(yè)相冊(cè)效果控件多級(jí)下拉圖片延遲加載或響應(yīng)式管理模板插件庫(kù)大轉(zhuǎn)盤(pán)九宮格效果整屏滾動(dòng)滾動(dòng)效果用于移動(dòng)項(xiàng)目的光滑菜單瀏覽器端格式化工具千手觀音 彈窗 1.blockUI2.overlay 3.sweetAlert 視頻 1.jwplayer2.video.js html53.swfobject Flas...
閱讀 924·2021-11-25 09:43
閱讀 3744·2021-11-19 09:40
閱讀 969·2021-09-29 09:34
閱讀 1899·2021-09-26 10:21
閱讀 939·2021-09-22 15:24
閱讀 4296·2021-09-22 15:08
閱讀 3326·2021-09-07 09:58
閱讀 2837·2019-08-30 15:55
