蝙蝠岛资源网 Design By www.hbtsch.com
微信小程序动画之下拉刷新动画的具体代码,供大家参考,具体内容如下
简易的效果
下面放代码:
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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
微信小程序,下拉刷新
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无微信小程序实现下拉刷新动画的评论...
更新日志
2024年12月27日
2024年12月27日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]