uni-app-applet/components/containers/container-subgroup.vue

<template>
	<view>
		<view v-if="loading && ifLoading" class="container-loading">
			<view class="loading-box">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</view>
		</view>
		<view v-else :style="{paddingTop: statusBarHeight +'px'}" class="pad-zy20" style="padding-bottom: 70px;">
			<slot name="content"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"container-subgroup",
		props:{
			ifLoading:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				statusBarHeight:uni.getStorageSync('statusBar') + 50,
				loading:true,
				exist:''
			};
		},
		// 执行顺序 第一
		beforeCreate(){
			this.exist = uni.getStorageSync('token');
			this.exist ? this.loading = false : this.loading = true;
		},
		// 执行顺序 第二
		created(){
			
		},
		// 执行顺序 第三
		beforeMount(){
			
		},
		// 执行顺序 第四
		mounted(){
			setTimeout(()=>{
				this.loading = false;
			},500)
		},
		// 组件更新前
		beforeUpdate(){
			
		},
		// 组件更新后
		updated(){
			
		},
		// 组件销毁前：实例销毁之前调用。在这一步，实例仍然完全可用
		beforeDestroy(){
			
		},
		// 销毁所有实例
		destroyed(){
			
		}
	}
</script>

<style scoped>
	.container-loading {position: fixed;top: 0;left: 0;bottom: 0;right: 0;display: flex;justify-content: center;align-items: center;}
	.container-loading .loading-box {width: 80rpx;display: flex;flex-wrap: wrap;animation: rotate 3s linear infinite;}
	@keyframes rotate{
		to{transform: rotateZ(360deg);}
	}
	.container-loading .loading-box span {width: 32rpx;height: 32rpx;background-color: #000000;margin: 4rpx;animation: scale 1.5s linear infinite;}
	@keyframes scale{
		50%{transform: scale(1);}
	}
	.container-loading .loading-box span:nth-child(1){border-radius: 50% 50% 0 50%;transform-origin: bottom right;}
	.container-loading .loading-box span:nth-child(2){border-radius: 50% 50% 50% 0;transform-origin: bottom left;animation-delay: .5s;}
	.container-loading .loading-box span:nth-child(3){border-radius: 50% 0 50% 50%;transform-origin: top right;animation-delay: 1.5s;}
	.container-loading .loading-box span:nth-child(4){border-radius: 0 50% 50% 50%;transform-origin: top left;animation-delay: 1s;}
</style>