实现效果(还是有很多不完善,如果你是需要多个你可以复制然后改个名字就可以重负使用了,当然你也可以弄成组件来高可用):
index.wxml
<view class='content'> <image class='img' animation="{{animationData}}" src='{{statusImage}}'></image> <view class='row {{statusClass}}'></view> </view>
index.wxss
.content { margin-left: 5%; margin-top: 50%; } .img { width: 30px; height: 30px; } .row { display: inline-block; width: 70%; height: 30px; margin-left: 10px; border-radius: 10px; } /* 加载 */ .load { background-color: #7B7878; } /* 失败 */ .failing { background-color: #E51C23; } /* 成功 */ .success { background-color: #7FCA27; }
index.js
data 变量是根据你的业务来做处理的,这个随机应变。
Page({ /** * 页面的初始数据 */ data: { rotateIndex: '', animationData: {}, statusImage: '/resource/images/1/line_loading.png', statusClass: 'load' }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { // 创建动画 var animation = wx.createAnimation({ duration: 200, timingFunction: 'ease' }) this.animation = animation // 图片旋转 this.imageRotators() }, // 图片一直旋转动画 imageRotators: function () { //连续动画需要添加定时器,所传参数每次+1就行 this.timeInterval = setInterval(function () { this.data.rotateIndex = this.data.rotateIndex + 1; this.animation.rotateZ(360 * (this.data.rotateIndex)).step() this.setData({ animationData: this.animation.export() }) }.bind(this), 500) // 请求API接口或者别的操作 this.request() }, // 停止旋转 stopRotators: function () { if (this.timeInterval > 0) { clearInterval(this.timeInterval) this.timeInterval = 0 } }, // 请求API接口或者别的操作 request: function(e) { var that = this console.log('request') setTimeout(function () { // 停止旋转 that.stopRotators() console.log('请求到了数据或者操作完成,停止旋转') // 这里是根据自己的业务逻辑设置 var data = true if (data) { that.setData({ statusImage: '/resource/images/1/line_success.png', statusClass: 'success' }) } else { that.setData({ statusImage: '/resource/images/1/line_fail.png', statusClass: 'failing' }) } }, 3000) }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })