微信小程序實現動態(tài)列表項的順序加載動畫

更新時間：2019年07月25日 12:07:01 作者：MarieDreamer

這篇文章主要為大家詳細介紹了微信小程序實現動態(tài)列表項的順序加載動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序實現動態(tài)列表項的順序加載動畫，供大家參考，具體內容如下

效果

思路

1、最開始用了純CSS動畫animation，發(fā)現動畫需要重復寫，于是換使用transition動畫。

2、使用onReady()可以讓頁面加載好再顯示動畫以免動畫提前結束。

代碼

wxml

<!-- style中的主要為了區(qū)分已加載好的項和新數據，只有新數據有動畫 -->
<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;
}

Page({
 data: {
  list: ['啦啦啦', '嚯嚯嚯'],
  lists: ['啦啦啦', '嚯嚯嚯'],
  page:1
 },
 
 onLoad: function (options) {
 
 },
 
 onReady:function(e){
  this.setData({
   op: 1,
   mr:0
  })
 },
 
 next:function(e){
  this.data.page ++;
  //模擬從后臺獲取到了下一頁的數據，附加到原有數組上
  var lists = this.data.lists.concat(this.data.list)
  this.setData({
   lists:lists,
   page: this.data.page,
   op: 0,
   mr: -50
  })
  this.onReady();
 },
})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

javascript中通過arguments參數偽裝方法重載
面向對象的高級語言中，都有方法的重載，在js中可以通過arguments這個參數來偽裝成函數重載，具體如下
2014-10-10
es6學習之解構時應該注意的點
解構賦值允許你使用類似數組或對象字面量的語法將數組和對象的屬性賦給各種變量。這種賦值語法極度簡潔，同時還比傳統(tǒng)的屬性訪問方法更為清晰，下面這篇文章主要給大家介紹了關于在es6解構時應該注意的點，需要的朋友可以參考下。
2017-08-08
利用純JS實現像素逐漸顯示的方法示例
這篇文章主要給大家介紹了利用純JS實現像素逐漸顯示的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面跟著小編來一起學習學習吧。
2017-08-08
JavaScript中的LHS和RHS分析詳情
這篇文章主要介紹了JavaScript中的LHS和RHS分析詳情，?LHS??是賦值操作即可以看做是在往內存中存儲值，而??RHS??是取值操作，它是從內存中進行檢索，下文更多相關資料介紹需要的小伙伴可以參考一下
2022-04-04
小程序實現瀑布流動態(tài)加載列表
這篇文章主要為大家詳細介紹了小程序實現瀑布流動態(tài)加載列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
JavaScript自定義數組排序方法
這篇文章主要介紹了JavaScript自定義數組排序方法,實例分析了javascript自定義數組排序的原理與實現技巧,非常具有實用價值,需要的朋友可以參考下
2015-02-02
JS實現簡易的圖片拖拽排序實例代碼
這篇文章主要介紹了JS實現簡易的圖片拖拽排序實例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
javascript實用小函數使用介紹
本文整理了一些實用小函數如阻止輸入非數字，backspace除外；限制輸入最大字符串長度等，需要的朋友可以了解下
2013-11-11
DOM3中的js textInput文本事件
DOM3中引入了文本事件，其中之一 textInput 。當用戶再可編輯區(qū)域輸入字符時觸發(fā)該事件。
2011-04-04
微信小程序實現購物車功能
這篇文章主要為大家詳細介紹了微信小程序實現購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-11-11