微信小程序实现下拉刷新动画

微信(小程序)  /  管理员 发布于 3年前   430

微信小程序动画之下拉刷新动画的具体代码，供大家参考，具体内容如下

简易的效果

下面放代码：

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; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• 微信小程序实现拍照画布指定区域生成图片
• 微信小程序实现弹出菜单动画
• 微信小程序实现圆形进度条动画
• 微信小程序实现录音时的麦克风动画效果实例
• 微信小程序使用canvas的画图操作示例
• 微信小程序CSS3动画下拉菜单效果
• 小程序和web画三角形实现解析