效果图:
自定义loading组件wxml源码:
<view class="loading" wx:if="{{show}}">
<text></text>
<text></text>
<text></text>
<text></text>
<text></text>
</view>
wxss:
.loading {
width: 100px;
height: 40px;
margin: 0 auto;
display: flex;
justify-content: space-around;
}
.loading text {
display: inline-block;
width: 8px;
height: 100%;
border-radius: 4px;
background: lightgreen;
animation: load 1s ease infinite;
}
.loading text:nth-child(2) {
animation-delay: 0.2s;
}
.loading text:nth-child(3) {
animation-delay: 0.4s;
}
.loading text:nth-child(4) {
animation-delay: 0.6s;
}
.loading text:nth-child(5) {
animation-delay: 0.8s;
}
@keyframes load {
0%, 100% {
height: 40px;
background: lightgreen;
}
50% {
height: 70px;
margin: -15px 0;
background: lightblue;
}
}
js:
Component({
properties: {
show: {
type: Boolean,
value: true,
},
},
data: {
},
methods: {
}
})
在引入该组件的时候,设置属性show,也就是向loading组价传递参数,判断loading组件什么时候展示和隐藏
文章评论