自定义加载动画组件

自定义小程序加载动画，常用于电商类小程序，两个点交叉移动
新建一个loading组件

<template>
	<view class="loading" v-if="loadingState">//使用原生开发，这里需要改成wx:if
	  <view class="loadingBox">
	    <view class="ani">
	      <view class="left item"></view>
	      <view class="right item"></view>
	    </view>
	    <text class="text">{{text}}</text>
	  </view>
	</view>
</template>

<script>
	export default {
		name:"z-loading",
		data() {
			return {
				
			};
		},
		props:{
			loadingState : {
				type: Boolean,
				default: false
			}
		}
	}
</script>

<style>
.loading{
  position: fixed;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loadingBox{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 150rpx;
  height: 150rpx;
.text{
  width: 90%;
  text-align: center;
  margin-top: 20rpx;
}
.ani{
  display: flex;
  justify-content: center;
  align-items: center;
}
.item{
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  margin: 0 15rpx;
  transition: all 0.5s linear;
}
.left{
  background-color: rgb(21, 241, 32);
  animation: left 1s linear infinite;
}
.right{
  background-color: rgb(228, 27, 27);
  animation: right 1s linear infinite;
}
@keyframes left{
  0%{
    transform: translateX(0);
  }
  50%{
    transform: translateX(50rpx);
  }
  100%{
    transform: translateX(0);
  }
}
@keyframes right{
  0%{
    transform: translateX(0);
  }
  50%{
    transform: translateX(-50rpx);
  }
  100%{
    transform: translateX(0);
  }
}
</style>

使用的时候直接在页面引入

<z-loading :loadingState="loadingState"></z-loading>

loadingState = true 显示动画
loadingState = false 隐藏动画