Nuxt.js loading 屬性配置

2020-02-13 17:39 更新

loading 屬性配置

  • 類型: Boolean 或 Object 或 String
在頁面切換的時候,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可能無法立即使用。

禁用加載進度條

  • 類型: Boolean

頁面切換的時候如果不想顯示加載進度條,可以在 nuxt.config.js 里面增加 loading: false 的配置:

module.exports = {
  loading: false
}

個性化加載進度條

  • 類型: Object

以下表格為進度條定制化時可用到的配置項及其說明。

類型默認值描述
colorString'black'進度條的顏色
failedColorString'red'頁面加載失敗時的顏色 (當 data 或 fetch 方法返回錯誤時)。
heightString'2px'進度條的高度 (在進度條元素的 style 屬性上體現(xiàn))。
throttleNumber200在ms中,在顯示進度條之前等待指定的時間。用于防止條形閃爍。
durationNumber5000進度條的最大顯示時長,單位毫秒。Nuxt.js 假設頁面在該時長內(nèi)加載完畢。
continuousBooleanfalse當加載時間超過duration時,保持動畫進度條。
cssBooleantrue設置為false以刪除默認進度條樣式(并添加自己的樣式)。
rtlBooleanfalse從右到左設置進度條的方向。

舉個例子,一個5像素高的藍色進度條,可以在 nuxt.config.js 中配置如下:

module.exports = {
  loading: {
    color: 'blue',
    height: '5px'
  }
}

自定義加載組件

  • 類型: String

你可以新建一個加載組件替代 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ù)進度條的示例:

continuous loading



以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號