效果 gif 图
Animation48.gif
前言
这里以组件的方式创建并使用
loading
需要对
vue组件开发的流程熟悉 不知道的可以看我的笔记了解--里面的第21条
动画使用的图片是在 Build Yourself a Right GIF Spinner / loading.io 网站找的下载并保存到了我的项目静态资源路径下
src -> assets -> img
正文
创建组件
- 新建
.vue文件：src -> components -> laoding -> index.vue - 编辑
index.vue文件
<template>
<div class="loading"></div>
</template>
<script>
export default {
name: 'Loading' // 定义的组件名称 使用时写法：loading
}
</script>
<style scoped>
.loading {
position: fixed;
left: 0;
top: 0;
background: url('~@/assets/img/loading-ball.svg') center center no-repeat #fff;
width: 100vw;
height: 100vh;
z-index: 1000;
}
</style>
使用组件
- 原理：
通过自定义一个变量
isLoading初始化为true，在数据请求成功之后将变量改为false，在template中通过变量来控制是否显示隐藏，使用vue自带的 过渡效果 增加用户体验
- 需要在全局的
css中加入过渡需要的样式
.fade-enter,
.fade-leave-active {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
-
.vue文件使用代码示例片段
<template>
<div>
<transition name="fade">
<loading v-if="isLoading"></loading>
</transition>
</div>
</template>
<script>
import Loading from '@/components/loading'
export default{
components:{ Loading },
data(){
return{
isLoading: true
}
},
mounted() {
const me = this
// 初始化页面数据
me.loadPageData()
},
methosd:{
loadPageData: function() {
// axios 请求页面数据 .then 中将状态值修改 this.isLoading = false
},
}
}
<script>
