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


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 相关文章推荐
javascript+mapbar实现地图定位
Apr 09 Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
javascript读写json示例
Apr 11 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
深入探讨前端框架react
Dec 09 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
svg动画之动态描边效果
Feb 22 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 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 日常开发小技巧
2009/09/23 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
Python Http请求json解析库用法解析
2020/11/28 Python
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
英国探险旅游专家:Explore
2018/12/20 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
财务会计专业应届毕业生求职信
2013/10/18 职场文书
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
简历里的自我评价
2014/01/31 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
小学大队长竞选稿
2015/11/20 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书