微信小程序?qū)崿F(xiàn)動(dòng)態(tài)列表項(xiàng)的順序加載動(dòng)畫
更新時(shí)間：2019年07月25日 12:07:01 作者：MarieDreamer
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)列表項(xiàng)的順序加載動(dòng)畫，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)列表項(xiàng)的順序加載動(dòng)畫，供大家參考，具體內(nèi)容如下
效果
思路
1、最開始用了純CSS動(dòng)畫animation，發(fā)現(xiàn)動(dòng)畫需要重復(fù)寫，于是換使用transition動(dòng)畫。
2、使用onReady()可以讓頁(yè)面加載好再顯示動(dòng)畫以免動(dòng)畫提前結(jié)束。
代碼
wxml
<!-- style中的主要為了區(qū)分已加載好的項(xiàng)和新數(shù)據(jù)，只有新數(shù)據(jù)有動(dòng)畫 -->
<view wx:for="{{lists}}" class="common"
style='opacity:{{index >= (page-1)*2?op:"1"}};margin-left:{{index >= (page-1)*2?mr:"0"}}rpx;transition:all {{index >= (page-1)*2?(index-(page-1)*2)*0.5+0.5:"0"}}s;' >
第{{index}}條
</view>
<view bindtap='next' style='position:relative;right:-150px;top:50rpx;'>下一頁(yè)</view>
wcss
page{
background: #eee
}
.common{
height: 100rpx;
opacity: 0;
margin-left: -50rpx;
background: #fff;
margin-top: 20rpx;
line-height: 100rpx;
padding: 25rpx;
}
js
Page({
data: {
list: ['啦啦啦', '嚯嚯嚯'],
lists: ['啦啦啦', '嚯嚯嚯'],
page:1
},
onLoad: function (options) {
},
onReady:function(e){
this.setData({
op: 1,
mr:0
})
},
next:function(e){
this.data.page ++;
//模擬從后臺(tái)獲取到了下一頁(yè)的數(shù)據(jù)，附加到原有數(shù)組上
var lists = this.data.lists.concat(this.data.list)
this.setData({
lists:lists,
page: this.data.page,
op: 0,
mr: -50
})
this.onReady();
},
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript中通過arguments參數(shù)偽裝方法重載
面向?qū)ο蟮母呒?jí)語(yǔ)言中，都有方法的重載，在js中可以通過arguments這個(gè)參數(shù)來偽裝成函數(shù)重載，具體如下2014-10-10
es6學(xué)習(xí)之解構(gòu)時(shí)應(yīng)該注意的點(diǎn)
解構(gòu)賦值允許你使用類似數(shù)組或?qū)ο笞置媪康恼Z(yǔ)法將數(shù)組和對(duì)象的屬性賦給各種變量。這種賦值語(yǔ)法極度簡(jiǎn)潔，同時(shí)還比傳統(tǒng)的屬性訪問方法更為清晰，下面這篇文章主要給大家介紹了關(guān)于在es6解構(gòu)時(shí)應(yīng)該注意的點(diǎn)，需要的朋友可以參考下。2017-08-08
這篇文章主要給大家介紹了利用純JS實(shí)現(xiàn)像素逐漸顯示的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
這篇文章主要介紹了JavaScript中的LHS和RHS分析詳情，?LHS??是賦值操作即可以看做是在往內(nèi)存中存儲(chǔ)值，而??RHS??是取值操作，它是從內(nèi)存中進(jìn)行檢索，下文更多相關(guān)資料介紹需要的小伙伴可以參考一下2022-04-04
小程序?qū)崿F(xiàn)瀑布流動(dòng)態(tài)加載列表
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)瀑布流動(dòng)態(tài)加載列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了JavaScript自定義數(shù)組排序方法,實(shí)例分析了javascript自定義數(shù)組排序的原理與實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
JS實(shí)現(xiàn)簡(jiǎn)易的圖片拖拽排序?qū)嵗a
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)易的圖片拖拽排序?qū)嵗a，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
本文整理了一些實(shí)用小函數(shù)如阻止輸入非數(shù)字，backspace除外；限制輸入最大字符串長(zhǎng)度等，需要的朋友可以了解下2013-11-11
DOM3中引入了文本事件，其中之一 textInput 。當(dāng)用戶再可編輯區(qū)域輸入字符時(shí)觸發(fā)該事件。2011-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)購(gòu)物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11