功能需求:点击刷新图标,图标旋转进入Loading状态,加载完毕,动画停止
//index.wxml
<view class="flex-col group_2">
<text decode="decode" class="text_1">{{userInfo.nickName}}</text>
<view class="flex-row items-center section_1" hover-class="down_state" hover-stay-time="{{50}}" catchtap="setAnimation">
<van-icon name="http://xxx.xxxx.com/app/xxx.png" class="image_1" />
<text decode="decode" class="text_2">余额</text>
<van-icon animation="{{animation}}" name="/assets/reflash.png" />
</view>
</view>
// index.js
Page({
data: {
animation: null
},
setAnimation() {
this.startAnimationInterval()
this.reloadInfo()
},
reloadInfo() {
const that = this
wx.showLoading({
title: '刷新中',
mask: true
})
getUserInfo().then(res => {
wx.hideLoading()
if (res.code === 200) {
wx.showToast({
title: '刷新成功',
icon: 'none',
duration: 1000
})
wx.setStorageSync('userInfo', res.data)
that.getUsers()
that.stopAnimationInterval()
} else {
wx.showToast({
title: res.message,
icon: 'none',
duration: 2000
})
}
})
},
getUsers() {
let userInfo = wx.getStorageSync('userInfo')
if (userInfo) {
this.setData({
userInfo
})
}
},
/**
* 实现image旋转动画,每次旋转 120*n度
*/
rotateAni: function (n) {
_animation.rotate(120 * (n)).step()
this.setData({
animation: _animation.export()
})
},
/**
* 开始旋转
*/
startAnimationInterval: function () {
var that = this;
that.rotateAni(++_animationIndex); // 进行一次旋转
_animationIntervalId = setInterval(function () {
that.rotateAni(++_animationIndex);
}, _ANIMATION_TIME); // 每间隔_ANIMATION_TIME进行一次旋转
},
/**
* 停止旋转
*/
stopAnimationInterval: function () {
if (_animationIntervalId > 0) {
clearInterval(_animationIntervalId);
_animationIntervalId = 0;
}
},
}