国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

微信小程序實現下拉刷新動畫

2019-11-19 11:17:58
字體:
來源:轉載
供稿:網友

微信小程序動畫之下拉刷新動畫的具體代碼,供大家參考,具體內容如下

簡易的效果

下面放代碼:

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 宜城市| 波密县| 恩平市| 揭东县| 大姚县| 社旗县| 崇义县| 河西区| 罗山县| 温泉县| 榆中县| 台中县| 克拉玛依市| 周至县| 东乡族自治县| 平定县| 多伦县| 东阿县| 巴彦县| 全南县| 冕宁县| 鸡泽县| 胶南市| 同心县| 大宁县| 寿光市| 洪湖市| 武汉市| 崇左市| 黔西| 义马市| 德钦县| 凌云县| 洞口县| 四子王旗| 措勤县| 元氏县| 万年县| 潢川县| 晋中市| 乌恰县|