86 lines
2.2 KiB
Vue
86 lines
2.2 KiB
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 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>
|