本文實例為大家分享了微信小程序?qū)崿F(xiàn)動態(tài)列表項的順序加載動畫，供大家參考，具體內(nèi)容如下
按需搭建網(wǎng)站可以根據(jù)自己的需求進行定制，成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計構(gòu)思過程中功能建設(shè)理應(yīng)排到主要部位公司成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計的運用實際效果公司網(wǎng)站制作網(wǎng)站建立與制做的實際意義
效果
思路
1、最開始用了純CSS動畫animation，發(fā)現(xiàn)動畫需要重復(fù)寫，于是換使用transition動畫。
2、使用onReady()可以讓頁面加載好再顯示動畫以免動畫提前結(jié)束。
代碼
wxml
第{{index}}條 下一頁
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 ++;
//模擬從后臺獲取到了下一頁的數(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();
},
})以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
