codecamp

Nuxt.js loading 属性配置

loading 属性配置

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

在你的组件中你可以使用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来调用它,因为$loading可能无法立即使用。

禁用加载进度条

  • 类型: Boolean

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

module.exports = {
  loading: false
}

个性化加载进度条

  • 类型: Object

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

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

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

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

自定义加载组件

  • 类型: String

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

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

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

我们可以在 components 目录下创建自定义的加载组件,如 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 时间内从0%移至100%(无论实际进度如何)。 当加载时间超过 duration 时,进度条将保持100%直到加载完成。

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

持续进度条的示例:

continuous loading



Nuxt.js .nuxtignore
Nuxt.js loadingIndicator 属性
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }