uniapp封装一个自定义的loading组件

成果：就大概是这样一个可以旋转的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属性获取传递的参数。