PocketLibs（3）—— 進度條 NProgress

crossoverJie 發布于2019-08-22 16:02 / 3070人閱讀

摘要：可以指定一個具體值，而非增量，在之間。這是因為，使進度增加超過時，會變成，之后又從重新開始。所以，當為時，我們停止調用。

依賴jQuery。

import nprogress from "nprogress"
import "nprogress/nprogress.css"

$("#btn-loading").on("click", function () {
    nprogress.start()
    setTimeout(() => {
        nprogress.done()
    }, 3000);
})

nprogress.start()開始加載，nprogress.done()加載完成

掛載目標

nprogress.configure({ parent: "#app" })改變進度條掛載的目標，默認是

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 ：

這里設置了一個定時器，每過0.5秒調用一次inc()，生成隨機增量，這里有個問題，如果少了if...else...，會變成如下這個效果。

這是因為，inc()使進度增加超過1時，nprogress.status會變成null，之后又從0重新開始。所以，當nprogress.status為null時，我們停止調用inc()。

如果設置一個指定增量，不會有以上問題。

改變顏色

如果要改變默認顏色，就要在nprogress.css文件中修改。
我復制一份nprogress.css，然后在拷貝中修改顏色，再引用這份拷貝。

// import "nprogress/nprogress.css"
import "./nprogress.scss"

//......

/*nprogress.scss*/
$color:#FF5983;

/*原先顏色都替換成$color*/
/* ... */

其他

這些配置都是在NProgress.configure(options)中的options中配置

showSpinner：true/false 是否顯示螺旋加載（就是右上角那個圈圈）
trickle：默認情況就是不使用inc()也會有默認增量，這個選項決定是否關閉這個默認增量
trickleSpeed：默認情況下進度條增加的速度
minimum：進度條初始值
easing、speed：進度條增加時有個動畫效果，這兩個選項設置動畫的貝塞爾曲線及其增加速度，如：

nprogress.configure({ easing: "cubic-bezier", speed: 200 })

template: 這個進度是被包在一個以下這個role="bar"這個div中的，我們可以通過這個選項重寫這個div，以徹底改變默認的內部構造。暫時用不到。

GPU云服務器云服務器進度條上傳進度條網站進度條帶進度條

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93983.html

路由

摘要：由命名路由與子路由構成整體結構，我們用它構建如下頁面。以下兩張圖說明路由和子路由是如何工作的。繼續修改好友信息的路由部分添加好友信息為組件添加動態路由為動態路由添加為路徑參數添加數據下發為組件添加，并使用它。不使用vue-router的情況代碼官方給出下面的例子在不使用vue-router的情況下來實現一個路由。該示例結合了H5歷史管理API、單文件組件、JS模塊相關內容來實現路由...

Aklman 2019-08-22 16:09 評論0 收藏0
記一次開源學習--D2Admin 人人企業版

摘要：前言上個月月底開源組開源了使用適配人人企業版專業版的前端工程具體詳情見人人企業版適配發布。當然，也督促自己產出一篇相關的文章，來記錄這次有趣的學習之旅。 Created by huqi at 2019-5-5 13:01:14 Updated by huqi at 2019-5-20 15:57:37 前言上個月月底@D2開源組開源了使用 D2Admin 適配人人企業版(專業版) 的...

notebin 2019-05-21 19:46 評論0 收藏0
vue+node+mongodb 搭建一個完整博客

摘要：開發一個完整博客流程前言前段時間剛把自己的個人網站寫完，于是這段時間因為事情不是太多，便整理了一下，寫了個簡易版的博客系統服務端用的是框架進行開發技術棧目錄結構講解的配置文件放置代碼文件項目參數配置的文件日志打印文件項目依賴模塊 Vue + Node + Mongodb 開發一個完整博客流程前言前段時間剛把自己的個人網站寫完，于是這段時間因為事情不是太多，便整理了一下，寫了個簡易...

Miracle_lihb 2019-06-26 17:32 評論0 收藏0
Web前端常用插件

摘要：彈窗視頻嵌入插件幻燈片圖片切換手機端響應式日期控件上傳圖片控件校驗控件分頁靜態分頁動態分頁相冊效果控件多級下拉圖片延遲加載或響應式管理模板插件庫大轉盤九宮格效果整屏滾動滾動效果用于移動項目的光滑菜單瀏覽器端格式化工具千手觀音彈窗 1.blockUI2.overlay 3.sweetAlert 視頻 1.jwplayer2.video.js html53.swfobject Flas...

quietin 2019-08-21 10:31 評論0 收藏0