微信小程序实现动态列表项的顺序加载动画
网络编程 2021-07-04 15:51www.168986.cn编程入门
这篇文章主要为大家详细介绍了微信小程序实现动态列表项的顺序加载动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现动态列表项的顺序加载动画,供大家参考,具体内容如下
效果
思路
1、最开始用了纯CSS动画animation,发现动画需要重复写,于是换使用transition动画。
2、使用onReady()可以让页面加载好再显示动画以免动画提前结束。
代码
wxml
<!-- style中的主要为了区分已加载好的项和新数据,只有新数据有动画 --> <view wx:for="{{lists}}" class="mon" 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;:50rpx;'>下一页</view>
wcss
page{ background: #eee } .mon{ height: 100rpx; opacity: 0; margin-left: -50rpx; background: #fff; margin-: 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(); }, })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程