API: loading 属性配置

loading 属性配置

  • 类型: BooleanObjectString

在页面切换的时候,Nuxt.js 使用内置的加载组件显示加载进度条。你可以定制它的样式,禁用或者创建自己的加载组件。

在你的组件中你可以使用this.$nuxt.$loading.start()来启动加载条。使用this.$nuxt.$loading.finish()来使加载条结束。

  1. export default {
  2. mounted () {
  3. this.$nextTick(() => {
  4. this.$nuxt.$loading.start()
  5. setTimeout(() => this.$nuxt.$loading.finish(), 500)
  6. })
  7. }
  8. }

如果要在mounted方法中启动它,请确保使用this.$nextTick来调用它,因为$loading可能无法立即使用。

禁用加载进度条

  • 类型: Boolean

页面切换的时候如果不想显示加载进度条,可以在 nuxt.config.js 里面增加 loading: false 的配置:

  1. module.exports = {
  2. loading: false
  3. }

个性化加载进度条

  • 类型: Object

以下表格为进度条定制化时可用到的配置项及其说明。

类型默认值描述
colorString'black'进度条的颜色
failedColorString'red'页面加载失败时的颜色 (当 datafetch 方法返回错误时)。
heightString'2px'进度条的高度 (在进度条元素的 style 属性上体现)。
throttleNumber200在ms中,在显示进度条之前等待指定的时间。用于防止条形闪烁。
durationNumber5000进度条的最大显示时长,单位毫秒。Nuxt.js 假设页面在该时长内加载完毕。
continuousBooleanfalse当加载时间超过duration时,保持动画进度条。
cssBooleantrue设置为false以删除默认进度条样式(并添加自己的样式)。
rtlBooleanfalse从右到左设置进度条的方向。

举个例子,一个5像素高的蓝色进度条,可以在 nuxt.config.js 中配置如下:

  1. module.exports = {
  2. loading: {
  3. color: 'blue',
  4. height: '5px'
  5. }
  6. }

自定义加载组件

  • 类型: String

你可以新建一个加载组件替代 Nuxt.js 默认的。使用自己的加载组件,需要在 loading 配置项里指定组件的路径,Nuxt.js 会自动调用该组件。

自定义组件需要实现以下接口方法:

方法是否必须描述
start()路由更新(即浏览器地址变化)时调用, 请在该方法内显示组件。
finish()路由更新完毕(即asyncData方法调用完成且页面加载完)时调用,请在该方法内隐藏组件。
fail(error)路由更新失败时调用(如asyncData方法返回异常)。
increase(num)页面加载过程中调用, num 是小于 100 的整数。

我们可以在 components 目录下创建自定义的加载组件,如 components/loading.vue

  1. <template lang="html">
  2. <div class="loading-page" v-if="loading">
  3. <p>Loading...</p>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. data: () => ({
  9. loading: false
  10. }),
  11. methods: {
  12. start () {
  13. this.loading = true
  14. },
  15. finish () {
  16. this.loading = false
  17. }
  18. }
  19. }
  20. </script>
  21. <style scoped>
  22. .loading-page {
  23. position: fixed;
  24. top: 0;
  25. left: 0;
  26. width: 100%;
  27. height: 100%;
  28. background: rgba(255, 255, 255, 0.8);
  29. text-align: center;
  30. padding-top: 200px;
  31. font-size: 30px;
  32. font-family: sans-serif;
  33. }
  34. </style>

然后, 更新 nuxt.config.js 告诉 Nuxt.js 使用自定义加载组件:

  1. module.exports = {
  2. loading: '~/components/loading.vue'
  3. }

进度条时长说明

Loading组件不可能事先知道多长时间。加载新页面将需要。因此,无法将进度条准确地设置为100%的加载时间。

Nuxt的加载组件通过让你设置 duration 来部分解决这个问题,这应该设置为 guestimate 加载过程需要多长时间。 除非您使用自定义加载组件,否则进度条将始终在 duration 时间内从0%移至100%(无论实际进度如何)。 当加载时间超过 duration 时,进度条将保持100%直到加载完成。

您可以通过将continuous设置为true来更改默认行为,然后在达到100%后,进度条将在duration时间内再次收缩回0%。当达到0%后仍未完成加载时,它将再次从0%开始增长到100%,这将重复直到加载完成。

持续进度条的示例: continuous loading