uniapp 实现一个刷新转圈功能

功能展示

最近在uniapp 上实现了一个刷新的小功能，这个功能在提高人机交互方面有不错的体验，有需要自提。先来看一下效果： 动画效果

一、代码如下

	<view style='flex:1    text-align: right;' @click="refresh()">
		<img :animation="animationDataRefresh" :style="{'width':'70rpx','height':'40rpx'}"
			src='http://img.fzpgyl.com/wechat/addressRefresh.png'>
  </view>

	refresh() {
				if (this.token) {
					//调用接口
					let opts = {
						url: '/depotHead/getDepotCountByCurrentUser',
						method: 'GET'
					};
					request.httpRequest(opts, true, {}).then(res => {
						if (res.code === 200) {
							this.numInfo = {
								...res.data
							}
							this.count++
							var animation1 = uni.createAnimation({
								duration: 1000,
								timingFunction: 'linear',
							})
							setTimeout(() => {
								animation1.rotate(360 * this.count).step()
								this.animationDataRefresh = animation1.export()
							}, 500)
						}
					})
				}
			},

总结

不复杂的小功能 微信扫一扫下面的二维码支持一下