微信小程序?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()可以讓頁面加載好再顯示動(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;'>下一頁</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)獲取到了下一頁的數(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)文章
下面小編就為大家了一篇判斷JS對(duì)象是否擁有某屬性的方法推薦。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)翻牌小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
JavaScript手寫實(shí)現(xiàn)一個(gè)簡(jiǎn)單的快捷鍵庫
前端開發(fā)中,有時(shí)項(xiàng)目會(huì)遇到一些快捷鍵需求,比如綁定快捷鍵,展示快捷鍵,編輯快捷鍵等需求,所以本文就來用JavaScript手寫一個(gè)簡(jiǎn)單的快捷鍵庫吧2024-02-02
這篇文章主要給大家介紹了關(guān)于微信小程序npm引入vant-weapp的踩坑記錄，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
JavaScript實(shí)現(xiàn)網(wǎng)頁對(duì)象拖放功能的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁對(duì)象拖放功能的方法,涉及javascript針對(duì)瀏覽器的判斷、事件愛你的添加與移除等相關(guān)操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
JS插入排序簡(jiǎn)單理解與實(shí)現(xiàn)方法分析
這篇文章主要介紹了JS插入排序簡(jiǎn)單理解與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了JavaScript插入排序基本原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-11-11
純JavaScript實(shí)現(xiàn)猜數(shù)字游戲
這篇文章主要為大家詳細(xì)介紹了純JavaScript實(shí)現(xiàn)猜數(shù)字游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
iview通過Dropdown(下拉菜單)實(shí)現(xiàn)的右鍵菜單
這篇文章主要介紹了iview通過Dropdown(下拉菜單)實(shí)現(xiàn)的右鍵菜單 ,需要的朋友可以參考下2018-10-10
基于javascript實(shí)現(xiàn)tab選項(xiàng)卡切換特效調(diào)試筆記
這篇文章主要介紹了基于javascript實(shí)現(xiàn)tab選項(xiàng)卡切換特效調(diào)試筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
JS內(nèi)置對(duì)象和Math對(duì)象知識(shí)點(diǎn)詳解
在本篇文章里小編給大家分享的是關(guān)于JS內(nèi)置對(duì)象和Math對(duì)象知識(shí)點(diǎn)詳解內(nèi)容，有需要的朋友們可以參考下。2020-04-04