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