W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
在頁面切換的時候,Nuxt.js 使用內(nèi)置的加載組件顯示加載進度條。你可以定制它的樣式,禁用或者創(chuàng)建自己的加載組件。
在你的組件中你可以使用this.$nuxt.$loading.start()來啟動加載條。使用this.$nuxt.$loading.finish()來使加載條結束。
export default {
mounted () {
this.$nextTick(() => {
this.$nuxt.$loading.start()
setTimeout(() => this.$nuxt.$loading.finish(), 500)
})
}
}
如果要在mounted方法中啟動它,請確保使用this.$nextTick來調(diào)用它,因為$loading可能無法立即使用。
頁面切換的時候如果不想顯示加載進度條,可以在 nuxt.config.js 里面增加 loading: false 的配置:
module.exports = {
loading: false
}
以下表格為進度條定制化時可用到的配置項及其說明。
鍵 | 類型 | 默認值 | 描述 |
---|---|---|---|
color | String | 'black' | 進度條的顏色 |
failedColor | String | 'red' | 頁面加載失敗時的顏色 (當 data 或 fetch 方法返回錯誤時)。 |
height | String | '2px' | 進度條的高度 (在進度條元素的 style 屬性上體現(xiàn))。 |
throttle | Number | 200 | 在ms中,在顯示進度條之前等待指定的時間。用于防止條形閃爍。 |
duration | Number | 5000 | 進度條的最大顯示時長,單位毫秒。Nuxt.js 假設頁面在該時長內(nèi)加載完畢。 |
continuous | Boolean | false | 當加載時間超過duration 時,保持動畫進度條。 |
css | Boolean | true | 設置為false以刪除默認進度條樣式(并添加自己的樣式)。 |
rtl | Boolean | false | 從右到左設置進度條的方向。 |
舉個例子,一個5像素高的藍色進度條,可以在 nuxt.config.js 中配置如下:
module.exports = {
loading: {
color: 'blue',
height: '5px'
}
}
你可以新建一個加載組件替代 Nuxt.js 默認的。 使用自己的加載組件,需要在 loading 配置項里指定組件的路徑,Nuxt.js 會自動調(diào)用該組件。
自定義組件需要實現(xiàn)以下接口方法:
方法 | 是否必須 | 描述 |
---|---|---|
start() | 是 | 路由更新(即瀏覽器地址變化)時調(diào)用, 請在該方法內(nèi)顯示組件。 |
finish() | 是 | 路由更新完畢(即asyncData 方法調(diào)用完成且頁面加載完)時調(diào)用,請在該方法內(nèi)隱藏組件。 |
fail() | 否 | 路由更新失敗時調(diào)用(如asyncData 方法返回異常)。 |
increase(num) | 否 | 頁面加載過程中調(diào)用, num 是小于 100 的整數(shù)。 |
我們可以在 components 目錄下創(chuàng)建自定義的加載組件,如 components/loading.vue:
<template lang="html">
<div class="loading-page" v-if="loading">
<p>Loading...</p>
</div>
</template>
<script>
export default {
data: () => ({
loading: false
}),
methods: {
start () {
this.loading = true
},
finish () {
this.loading = false
}
}
}
</script>
<style scoped>
.loading-page {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
text-align: center;
padding-top: 200px;
font-size: 30px;
font-family: sans-serif;
}
</style>
然后, 更新 nuxt.config.js 告訴 Nuxt.js 使用自定義加載組件:
module.exports = {
loading: '~components/loading.vue'
}
Loading組件不可能事先知道多長時間。加載新頁面將需要。因此,無法將進度條準確地設置為100%的加載時間。
Nuxt的加載組件通過讓你設置 duration 來部分解決這個問題,這應該設置為 guestimate 加載過程需要多長時間。 除非您使用自定義加載組件,否則進度條將始終在 duration 時間內(nèi)從0%移至100%(無論實際進度如何)。 當加載時間超過 duration 時,進度條將保持100%直到加載完成。
您可以通過將continuous設置為true來更改默認行為,然后在達到100%后,進度條將在duration時間內(nèi)再次收縮回0%。當達到0%后仍未完成加載時,它將再次從0%開始增長到100%,這將重復直到加載完成。
持續(xù)進度條的示例:
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: