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


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 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
js 替换
Feb 19 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
JQuery筛选器全系列介绍
Aug 27 Javascript
jQuery功能函数详解
Feb 01 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
element-ui的回调函数Events的用法详解
Oct 16 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
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
jQuery实现评论模块
2020/08/19 jQuery
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
优秀教师推荐材料
2014/12/16 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
网络营销实训总结
2015/08/03 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
Python3接口性能测试实例代码
2021/06/20 Python