PocketLibs（3）—— 進度條 NProgress

時間 2019-12-04

標籤 pocketlibs 進度 nprogress 简体版

原文原文鏈接

依賴jQuery。javascript

import nprogress from 'nprogress'
import 'nprogress/nprogress.css'

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

<div id="app">
    <button class="btn btn-warn" id="btn-loading">load</button>
</div>

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

掛載目標

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

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之間。app

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);
})

<div id="app">
    <button class="btn btn-warn" id="btn-loading">load</button>
    <!-- 監視inc()調用與進度條狀態-->
    <div style="margin-top:5px">
        invoke inc times ：
        <span id="inc_counter"></span>
        <br> noprogress status ：
        <span id="status_counter"></span>
    </div>
</div>

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

這是由於，inc()使進度增長超過1時，nprogress.status會變成null，以後又從0從新開始。因此，當nprogress.status爲null時，咱們中止調用inc()。spa

若是設置一個指定增量，不會有以上問題。code

改變顏色

若是要改變默認顏色，就要在nprogress.css文件中修改。
我複製一份nprogress.css，而後在拷貝中修改顏色，再引用這份拷貝。ip

// import 'nprogress/nprogress.css'
import './nprogress.scss'

//......

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

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

其餘

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

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

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

template: 這個進度是被包在一個如下這個role='bar'這個div中的，咱們能夠經過這個選項重寫這個div，以完全改變默認的內部構造。暫時用不到。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。