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


Posted in Javascript onJune 21, 2019

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

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

简易的效果

下面放代码:

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

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

Javascript 相关文章推荐
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 Javascript
javascript 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
js 操作符汇总
Nov 08 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 #Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 #Javascript
vue配置文件实现代理v2版本的方法
Jun 21 #Javascript
微信小程序自定义多列选择器使用详解
Jun 21 #Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 #Javascript
Vue多环境代理配置方法思路详解
Jun 21 #Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 #Javascript
You might like
老照片 - 几十年前的收音机与人
2021/03/02 无线电
学习php分页代码实例
2013/10/24 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
php常用表单验证类用法实例
2015/06/18 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
js a标签点击事件
2017/03/30 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
python使用super()出现错误解决办法
2017/08/14 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
python 自定义装饰器实例详解
2019/07/20 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
Django实现基于类的分页功能
2019/10/31 Python
django中间键重定向实例方法
2019/11/10 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
会计主管岗位职责范文
2013/11/08 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
作文评语集锦
2014/12/25 职场文书
旷工检讨书大全
2015/08/15 职场文书
员工试用期工作总结
2019/06/20 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
《三国志》赏析
2019/08/27 职场文书