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


Posted in Javascript onJuly 25, 2019

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

效果

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

 思路

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

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

代码

wxml

<!-- style中的主要为了区分已加载好的项和新数据,只有新数据有动画 -->
<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;
}

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();
 },
})

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

Javascript 相关文章推荐
js对象的比较
Feb 26 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
JS查找孩子节点简单示例
Jul 25 #Javascript
微信小程序自定义单项选择器样式
Jul 25 #Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 #Javascript
微信小程序实现原生步骤条
Jul 25 #Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 #Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 #Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 #Javascript
You might like
php 字符串压缩方法比较示例
2014/01/23 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
python TCP包注入方式
2020/05/05 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
一些Solaris面试题
2013/03/22 面试题
外国语学院毕业生自荐信
2013/10/28 职场文书
市政施工员自我鉴定
2014/01/15 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
2014年社区工作总结
2014/11/18 职场文书
给老婆的检讨书
2015/01/27 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
golang为什么要统一错误处理
2022/04/03 Golang