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


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 相关文章推荐
JavaScript While 循环基础教程
Apr 05 Javascript
javascript定义函数的方法
Dec 06 Javascript
JS原型对象通俗&quot;唱法&quot;
Dec 27 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
微信小程序仿通讯录功能
Apr 09 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 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
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
ExtJs的Date格式字符代码
2010/12/30 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
Node 代理访问的实现
2019/09/19 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
Python实现获取操作系统版本信息方法
2015/04/08 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
批处理与python代码混合编程的方法
2016/05/19 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
在python里从协程返回一个值的示例
2019/02/19 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
自学python用什么系统好
2020/06/23 Python
python音频处理的示例详解
2020/12/23 Python
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
世界上最大的艺术社区:SAA
2020/12/30 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
教学大赛获奖感言
2014/01/15 职场文书
禁毒宣传标语
2014/06/19 职场文书
债务授权委托书范本
2014/10/17 职场文书
工作年限证明模板
2015/06/15 职场文书
法制工作总结2015
2015/07/23 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python