# 前言
nuxt还有一个好玩的功能，他提供了一个页面加载的loading在页面头部展示，可设置高度、颜色等样式。页面开始加载时启动，加载完成后自动消 (官网参考)。
# 实现与配置
配置nuxt.config.js
export default{
loading: {
color: 'blue', // 进度条的颜色
failedColor: 'red', // 页面加载失败时的颜色（ 当 data 或 fetch 方法返回错误时）
height: '20px', // 进度条的高度(在进度条元素的 style 属性上体现)
throttle: 200, // 在 ms 中， 在显示进度条之前等待指定的时间。 用于防止条形闪烁
duration: 5000, // 进度条的最大显示时长， 单位毫秒。 Nuxt.js 假设页面在该时长内加载完毕
continuous: false, // 当加载时间超过duration时， 保持动画进度条
css: true, // 设置为 false 以删除默认进度条样式（ 并添加自己的样式）
rtl: false // 从右到左设置进度条的方向
}
}
这时切换页面，就能子页面顶部看到进度条了
# 定义实现
我们新建一个自己的加载组件来替代Nuxt.js默认的，需要在loading配置项里指定组件的路径，Nuxt.js 会自动调用该组件。而且自定义组件需要实现以下接口方法：
| 方法 | 是否必须 | 描述 |
|---|---|---|
| start() | 是 | 路由更新（即浏览器地址变化）时调用, 请在该方法内显示组件 |
| finish() | 是 | 路由更新完毕（即asyncData方法调用完成且页面加载完）时调用，请在该方法内隐藏组件 |
| fail(error) | 否 | 路由更新失败时调用（如asyncData方法返回异常） |
| increase(num) | 否 | 页面加载过程中调用, num 是小于 100 的整数 |
我们在components文件下创建loading.vue作为自定义loading，内容如下：
<template>
<!-- 自定义loading -->
<div class="loading-box" v-if="laoding" />
</template>
<script>
export default {
data:()=>({
laoding: false
}),
methods:{
start(){
this.laoding = true;
},
finish(){
this.laoding = false;
}
}
}
</script>
<style lang="scss" scoped>
.loading-box{
width: 100px;
height: 100px;
background-color: #23465a;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999999;
animation: rotateplane 1.5s infinite ease-in-out;
-webkit-animation: rotateplane 1.5s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
0%{-webkit-transform: perspective(120px);}
50%{-webkit-transform: perspective(120px) rotateY(180deg);}
100%{-webkit-transform: perspective(120px) rotateY(180deg) rotateY(180deg);}
}
@keyframes rotateplane {
0%{
transform: perspective(120px) rotateY(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateY(0deg) rotateY(0deg);
}
50%{
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
}
100%{
transform: perspective(120px) rotateX(-180deg) rotateY(179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(179.9deg);
}
}
</style>
记得改了nuxt.config.ls记得重启，之后切换页面就可以看到自定义的loading了~~
网友评论