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

微信(小程序)  /  管理员 发布于 2年前   383

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

效果

 思路

1、最开始用了纯CSS动画animation，发现动画需要重复写，于是换使用transition动画。

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

代码

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 ++;  //模拟从后台获取到了下一页的数据，附加到原有数组上  var lists = this.data.lists.concat(this.data.list)  this.setData({   lists:lists,   page: this.data.page,   op: 0,   mr: -50  })  this.onReady(); },})

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

您可能感兴趣的文章:

• 微信小程序实现列表下拉刷新上拉加载
• 微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
• 微信小程序 列表的上拉加载和下拉刷新的实现
• 微信小程序（六）：列表上拉加载下拉刷新示例