微信小程序实现动态列表项的顺序加载动画 - 行业资讯 - 肥雀云

本文实例为大家分享了微信小程序实现动态列表项的顺序加载动画,供大家参考,具体内容如下

<>强效果

<>强,思路

1,最开始用了纯CSS动画动画,发现动画需要重复写,于是换使用过渡动画。

2,使用onReady()可以让页面加载好再显示动画以免动画提前结束。

代码　　

wxml 　　　　　　& lt; !——中风格的主要为了区分已加载好的项和新数据,只有新数据有动画——比; 　　& lt;观点wx:="{{列表}}”类=捌胀ā? 　　风格='不透明度:{{指数祝辞=(第1页)* 2 & # 63;op: " 1 "}}; margin-left:{{指数祝辞=(第1页)* 2 & # 63;先生:“0”}}rpx;转型:所有{{指数祝辞=(第1页)* 2 & # 63;(指数-(第1页)* 2)* 0.5 + 0.5:“0”}};“比; 　　第{{指数}}条　　& lt;/view> 　　　　& lt;视图bindtap==皀ext”风格的位置:相对;右:-150 px;: 50 rpx;“在下一页& lt;/view> 　　　　wcs

　　　　　　页面{ 　　背景:# eee 　　} 　　.common { 　　身高:100 rpx; 　　透明度:0; 　　margin-left: -50 rpx; 　　背景:# fff; 　　margin-top: 20 rpx; 　　行高:100 rpx; 　　填充:25 rpx; 　　} 　　　　js

　　　　　　页面({ 　　数据:{ 　　列表:['啦啦啦”、“嚯嚯嚯”), 　　列表:['啦啦啦”、“嚯嚯嚯”), 　　页:1 　　}，　　　　onLoad:功能(选项){ 　　　　}，　　　　onReady:函数(e) { 　　this.setData ({ 　　op: 1、　　先生:0 　　}) 　　}，　　　　接下来:函数(e) { 　　this.data。页+ +;//模拟从后台获取到了下一页的数据,附加到原有数组上　　var=this.data.lists.concat列表(this.data.list) 　　this.setData ({ 　　列表:列表, 　　页面:this.data.page, 　　op: 0, 　　先生:-50 　　}) 　　this.onReady (); 　　}，　　}) 　　　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。