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


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的一些总结
Nov 03 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 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下对字符串的递增运算代码
2010/08/21 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
比较完整的微信开发php代码
2016/08/02 PHP
php session的应用详细介绍
2017/03/22 PHP
php fread函数使用方法总结
2019/05/28 PHP
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
python打包成so文件过程解析
2019/09/28 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
销售人员中英文自荐信
2013/09/22 职场文书
会计人员岗位职责
2014/03/19 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
好听的队名和口号
2014/06/09 职场文书
安全标语口号
2014/06/09 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
推普标语口号大全
2015/12/26 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
python 实现两个变量值进行交换的n种操作
2021/06/02 Python