实现效果(还是有很多不完善,如果你是需要多个你可以复制然后改个名字就可以重负使用了,当然你也可以弄成组件来高可用):
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 () {
}
})