微信小程序?qū)崿F(xiàn)下拉刷新動畫
更新時間：2019年06月21日 10:29:31 作者：CodeHunter_qcy
這篇文章主要為大家詳細介紹了微信小程序動畫實現(xiàn)下拉刷新動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下
微信小程序動畫之下拉刷新動畫的具體代碼，供大家參考，具體內(nèi)容如下
簡易的效果
下面放代碼：
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;
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了詳解webpack loader和plugin編寫，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)商品評價五星好評，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
JavaScript的對象基礎(chǔ) 本篇主要講解本地對象Array的各種方法。2009-12-12
因微信小程序上沒有自帶表單驗證,為了實現(xiàn)就自己做了個表單驗證,下面這篇文章主要給大家介紹了關(guān)于小程序表單校驗uni-forms的正確使用方式以及避坑指南,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
javascript數(shù)組去重的方法有很多種，在網(wǎng)上到處都可以找到答案，下面小編給大家整理了一份關(guān)于同類型的數(shù)組去重復的方法，感興趣的朋友一起看看吧2015-11-11
本節(jié)主要為大家介紹了js返回前一頁如何刷新本頁重載頁面的方法，需要的朋友可以參考下2014-07-07
JavaScript中object和Object的區(qū)別(詳解)
下面小編就為大家?guī)硪黄狫avaScript中object和Object的區(qū)別(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
JS前端開發(fā)之exec()和match()的對比使用
match()方法可在字符串內(nèi)檢索指定的值,或找到一個或多個正則表達式的匹配,下面這篇文章主要給大家介紹了關(guān)于JS前端開發(fā)之exec()和match()的對比使用的相關(guān)資料,需要的朋友可以參考下2022-09-09
有人說喜歡一個人，沒必要了解她的過去，然而想讀懂一個人，卻需要了解她的過去。2011-01-01
這篇文章主要介紹了JavaScript計算某一天是星期幾的方法,需要的朋友可以參考下2015-08-08