写在前面
组件很快就封装好了,一直在尝试是否能够写一个类似 wx. showLoading () 这样的调用即唤出 loading 消息的函数,一直出现各种各样的问题导致最终没能实现,一是作者自身能力有限,二是小程序并没有 Vue 这样的灵活,想到的很多写法在 Vue 上能够实现但是在微信小程序中并不可以…
还是给大家分享一下我封装的组件吧
效果展示
1.组件注册
(1)配置 loading. json
{
"component": true
}
(2)配置 app. json
...
"usingComponents": {
"E-loading": "./components/public-components/message-components/loading/loading"
}
2. loading.wxml
{{ maskShow ? 'mask-show' : 'mask-hidden' }}
是为了解决在 Loading 框消失后蒙版仍然起作用的问题(不知道为什么这里的 wx: if 在为假的时候不会删除节点?)
Loading6
里 9 个 view 是 Loading 动画的组成部分(代码是在 ✈️ 这位大佬的代码基础上进行调整的——完成了宽高自适应、调整了动画变得更为美观)
<view class="loadingMask {{ maskShow ? 'mask-show' : 'mask-hidden' }}" wx:if="{{ loadingShow }}">
<view class="border" >
<view class="loadingBox">
<view class="loading16">
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
<view></view>
</view>
</view>
<view class="textBox">{{ text }}</view>
</view>
</view>
3. loading. js
组件提供了 3 个属性 mask 蒙版,title 提示文字,show 显示隐藏
Component({
properties: {
mask: {
type: Boolean,
value: true
},
title: {
type: String,
value: " "
},
show: {
type: Boolean,
value: true
}
},
data: {
maskShow: true,
loadingShow: true,
text: "正在加载中~",
},
observers: {
mask: function (newMask) {
this.setData({
"maskShow": newMask
})
},
show: function (newShow) {
this.setData({
"loadingShow": newShow
})
},
title: function (newTitle) {
this.setData({
"text": newTitle
})
}
}
})
4. loading. wxss
/* 以下是loading动画 */
.loading16,
.loading16>view {
position: relative;
box-sizing: border-box;
}
.loading16 {
display: block;
font-size: 0;
color: #cccccc;
}
.loading16.la-dark {
color: #333;
}
.loading16>view {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading16 {
width: 72rpx;
height: 72rpx;
}
.loading16>view {
width: 16rpx;
height: 16rpx;
margin: 4rpx;
border-radius: 100%;
animation-name: ball-grid-pulse;
animation-iteration-count: infinite;
}
.loading16>view:nth-child(1) {
animation-duration: 1s;
animation-delay: 0.5s;
}
.loading16>view:nth-child(2) {
animation-duration: 1s;
animation-delay: 0.3s;
}
.loading16>view:nth-child(3) {
animation-duration: 1s;
animation-delay: 0.1s;
}
.loading16>view:nth-child(4) {
animation-duration: 1s;
animation-delay: 0.7s;
}
.loading16>view:nth-child(5) {
animation-duration: 1s;
animation-delay: 0.5s;
}
.loading16>view:nth-child(6) {
animation-duration: 1s;
animation-delay: 0.3s;
}
.loading16>view:nth-child(7) {
animation-duration: 1s;
animation-delay: 0.9s;
}
.loading16>view:nth-child(8) {
animation-duration: 1s;
animation-delay: 0.7s;
}
.loading16>view:nth-child(9) {
animation-duration: 1s;
animation-delay: 0.5s;
}
@keyframes ball-grid-pulse {
0% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.35;
transform: scale(0.45);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* 以上是loading动画 */
/* 以下是蒙版样式 */
.loadingMask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.mask-show {
z-index: 999;
}
.mask-hidden {
z-index: -1;
/* 将遮罩层置于底层 */
pointer-events: none;
/* 禁止点击事件 */
}
/* 以上是蒙版样式 */
/* 以下是loading框的样式 */
.border {
position: absolute;
left: 50%;
margin-left: -130rpx;
top: 50%;
margin-top: -130rpx;
width: 260rpx;
height: 260rpx;
background-color: rgba(0, 0, 0, 0.452);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
/* 以上是loading框的样式 */
/* 以下是text的样式 */
.textBox {
margin-top: 20rpx;
color: #cccccc;
font-size: 26rpx;
}