微信小程序实现下拉刷新动画
程序员文章站
2023-12-26 15:05:34
微信小程序动画之下拉刷新动画的具体代码,供大家参考,具体内容如下
简易的效果
下面放代码:
js:
var animation = wx.createa...
微信小程序动画之下拉刷新动画的具体代码,供大家参考,具体内容如下
简易的效果
下面放代码:
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:
<!-- 动画 --> <block wx:if="{{donghua}}"> <view class='donghua'> <image bindtap='hua' style='left:{{left1}}px' animation="{{animationdata1}}" src='../../images/1.png'></image> <image bindtap='hua' style='left:{{left2}}px' animation="{{animationdata2}}" src='../../images/2.png'></image> <image bindtap='hua' style='left:{{left3}}px' animation="{{animationdata3}}" src='../../images/3.png'></image> <image bindtap='hua' style='left:{{left4}}px' animation="{{animationdata4}}" src='../../images/1.png'></image> <image bindtap='hua' style='left:{{left5}}px' animation="{{animationdata5}}" src='../../images/2.png'></image> <image bindtap='hua' style='left:{{left6}}px' animation="{{animationdata6}}" src='../../images/3.png'></image> <image bindtap='hua' style='left:{{left7}}px' animation="{{animationdata7}}" src='../../images/1.png'></image> <image bindtap='hua' style='left:{{left8}}px' animation="{{animationdata8}}" src='../../images/2.png'></image> </view> </block>
wxss:
image{ margin-top: -150rpx; width: 40rpx; height: 40rpx; margin-left: 5%; position: absolute; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。