效果图:

wxml内容:
<!-- loading.wxml --> <view class="loading"> <view class="dot"
animation="{{alpha[0]}}"></view> <view class="dot"
animation="{{alpha[1]}}"></view> <view class="dot"
animation="{{alpha[2]}}"></view> <view class="dot"
animation="{{alpha[3]}}"></view> <view class="dot"
animation="{{alpha[4]}}"></view> </view>
wxss内容:
/** loading.wxss **/ .loading { width: 100%; position: absolute; bottom:
150rpx; justify-content: center; text-align: center; } .loading .dot{
background-color: #fff; display: inline-block; /**圆点大小在这里设置,高宽一致,圆角值为高宽的一半**/
width: 16rpx; height: 16rpx; border-radius: 8rpx; margin: 0 10rpx; opacity: 0; }
js内容:
/* loading.js */ Page({ data: { alpha: [1,1,1,1,1] }, onLoad: function () {
var self = this; var _index = 0; var _alpha = self.data.alpha; var _speed =
500; var timer = setInterval(function () { var an_show =
wx.createAnimation({}); var an_hide = wx.createAnimation({});
an_show.opacity(1).step({ duration: _speed }); an_hide.opacity(0).step({
duration: _speed }); _alpha[_index] = an_show; _alpha[_index == 0 ? 4 : _index
- 1] = an_hide; self.setData({ alpha: _alpha }) _index = _index == 4 ? 0 :
_index + 1; }, _speed); } })
 

技术
©2019-2020 Toolsou All rights reserved,
华为认证HCIA-AI人工智能NOI2019 游记消息质量平台系列文章|全链路排查篇过拟合和欠拟合的形象解释Unity 场景异步加载(加载界面的实现)Faster RCNN系列算法原理讲解(笔记)纽约年轻人计划“重新占领华尔街”:维护散户利益用C++跟你聊聊“原型模式” (复制/拷贝构造函数)初识python之技巧总结篇中级JAVA程序员应该掌握的数据结构知识