成果:就大概是这样一个可以旋转的loading(黑边不用理,是我录屏的原因)
1.components/myLoading/myLoading.vue
注意一定是组件名和文件夹相同
<template>
<view class="refresh-box" v-if="value">
<!-- aspectFit这个属性是必须的,可以按比例缩放图片 -->
<image src="../../static/images/square.png" mode="aspectFit" class="image"></image>
<view class="text">Loading</view>
</view>
</template>
<script>
export default {
name: 'Loading',
props: {
value: {
type: Boolean,
default: false
}
}
};
</script>
<style lang="scss">
.refresh-box {
display: flex;
flex-direction: column;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 400rpx;
.image {
margin-top: 100rpx;
width: 60rpx;
height: 60rpx;
animation-iteration-count: infinite;
animation-name: loading;
animation-duration: 2000ms;
animation-delay: 200ms;
animation-timing-function: ease-in-out;
}
.text {
font-size: 25rpx;
text-align: center;
margin-top: 20rpx;
font-weight: 500;
letter-spacing: 0px;
line-height: 23.17px;
}
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
2.自己想要把组件放在哪里(我这里是src/xzhu/xzhu.vue)
html:
<myLoading :value="isLoading"></myLoading>
//直接使用组件,名字就是自己命名的那个
data中:
//默认loading是不显示
isLoading:false
created(){
this.isLoading=true;
setTimeout(() => {
this.isLoading = false;
}, 4000); // 4000毫秒等于4秒
},
这里使用的是props来传递参数,将isLoading参数绑定到一个具有props属性的组件myLoading 上。在myLoading 组件中,通过props属性获取传递的参数。