网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

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

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

简易的效果

下面放代码:

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

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

上一篇:js事件触发操作实例分析
下一篇:vue elementUI使用tabs与导航栏联动
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap