微信小程序实现动态列表项顺序加载动画

本文分享微信小程序对动态列表项的顺序加载动画，供大家参考。具体内容如下

影响

思路

1.一开始我们用的是纯CSS动画，发现动画需要反复写，于是切换到过渡动画。

2.使用onReady()加载页面，然后显示动画，以避免动画提前结束。

密码

页面结构

！-style的主要用途是区分加载的项和新数据，只有新数据才有animation-viewx : for=' { { list } } ' class=' common ' style=' opa city 3360 { { index=(page-1)* 2？op :“1”} }；页边距-left:{{index=(page-1)*2？Mr :“0”} } rpx；transit : all { { index=(page-1)* 2？(index-(page-1)* 2)* 0.5 0.5: ' 0 ' } } s；'项目{ { index } }/view view bind tap=' next ' style=' position : relative；右：-150像素；' top:50rpx'下一页/视图

第{ background: #eee}页。普通{ height: 100rpxopa city 3360 0；左边距：-50 rpx；背景# fff保证金-top : 20 rpx；线高： 100 rpx；padding: 25rpx}js

page({ data : { list: ['la la '，' ho ho ho' ]，list :[' la la '，' ho ho ho']，page :1 } onread : function(e){ this . setdata({ op : 1，mr:0 }) }，next : function(e){ this . data . page；//模拟从后台获取下一页的数据，并将其附加到原始数组中。varlist=this . data . list . concat(this . data . list)this . setdata({ lists : list，page3360this.data.page，op33600，mr3360-50}) }，})以上就是本文的全部内容，希望对大家的学习有所帮助，希望大家多多支持我们。