微信小程序实现下拉刷新动画
微信(小程序)  /  管理员 发布于 3年前   384
微信小程序动画之下拉刷新动画的具体代码,供大家参考,具体内容如下
简易的效果
下面放代码:
js:
var animation = wx.createAnimation({})var i = 1;Page({ data: { donghua: true, left1: Math.floor(Math.random() * 250 + 1), left2: Math.floor(Math.random() * 250 + 1), left3: Math.floor(Math.random() * 250 + 1), left4: Math.floor(Math.random() * 250 + 1), left5: Math.floor(Math.random() * 250 + 1), left6: Math.floor(Math.random() * 250 + 1), left7: Math.floor(Math.random() * 250 + 1), left8: Math.floor(Math.random() * 250 + 1), }, //动画 donghua: function () { var that = this; setTimeout(function () { animation.translateY(800).step({ duration: 1600, timingFunction: 'ease' }) that.setData({ ["animationData" + i]: animation.export() }) i++; }.bind(that), 200) if (i < 9) { setTimeout(function () { that.donghua() }.bind(that), 200) } else { i = 0; animation.translateY(-800).step({ duration: 10, }) setTimeout(function () { for (var y = 0; y < 9; y++) { that.setData({ ["animationData" + y]: animation.export() }) that.setData({ ["animationData" + y + '.actions[0].animates[0].args[0]']: 0 }) } }.bind(that), 1500) } }, onPullDownRefresh: function () { wx.showNavigationBarLoading(); this.donghua(); wx.stopPullDownRefresh(); },})
wxml:
wxss:
image{ margin-top: -150rpx; width: 40rpx; height: 40rpx; margin-left: 5%; position: absolute; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
博主 在
2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..xiaoB 在
2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..BUG4 在
你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..博主 在
go语言+beego框架中获取get,post请求的所有参数中评论 @ t1 直接在router.go文件中配就ok..Jade 在
如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号