小程序实现下拉刷新动画

  • 内容
  • 相关
这篇文章主要为大家详细介绍了小程序动画实现下拉刷新动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下小程序动画之下拉刷新动画的具体代码,供大家参考,具体内容如下
由于无法发动图所以下面直接展示代码
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();

},

 

})

 

 

qml、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>

 

qss、wxss样式:

image{

margin-top: -150rpx;

width: 40rpx;

height: 40rpx;

margin-left: 5%;

position: absolute;

 

}

以上就是本文全部内容,转载自脚本之家

访问原文地址可复制该页内容!

原文地址:http://pengsirs.com/post-1.html

本文标签:

版权声明:若无特殊注明,本文皆为《彭Sir》原创,转载请保留文章出处。

本文链接:小程序实现下拉刷新动画 - http://pengsirs.com/post-1.html

收录状态:[百度已收录][等待360收录][搜狗已收录]

上一篇:学校网站系统 下一篇:小程序实现搜索功能并跳转搜索结果页面

发表评论

电子邮件地址不会被公开。 必填项已用*标注

允许邮件通知
网站备案相关信息
域名 pengsirs.com
主办方名称 彭松
主办单位性质 个人
主体备案号 鄂ICP备19010459号
ICP备案号 鄂ICP备19010459号-1
首页地址 http://pengsirs.com/ [备案查询]
网站名称 遇上更好的你
审核时间 2019/4/24 0:00:00