小程序实现列表展开收起效果


Posted in Javascript onJuly 29, 2020

本文实例为大家分享了小程序实现列表展开收起的具体代码,供大家参考,具体内容如下

效果:

小程序实现列表展开收起效果

原理:利用AppData值 + 显示隐藏的样式,进行展开收起。

wxml:

<view bindtap="toChange" data-show='isShow'>{{isShow?'收起':'展开'}}<view>
<view class="{{isShow?'db' : 'dn'}}">这是你要收起展开的内容</view>

js:

Page({\
  data: {
  isShow: true, //true为展开
  },
  /*
  * isShow做取反操作
  * */
  toChange (e) {
  let that = this;
  let name = e.currentTarget.dataset.show;
  let param = {};
  param[name] = !that.data[name];
  that.setData({
   ...param
  })
  },
 })

wxss:

.db{
 display:block;
}
.dn{
 display:none;
}

这个原理其实够正常的收起展开了,但是碰上列表,还需要调整一下,那么问题来了,如何让小程序列表中展示明细?

列表效果:

小程序实现列表展开收起效果

想法:利用AppData值 + 显示隐藏的样式,进行展开收起。还要加上“数据污染”。

js:

page({
data:{
 list:[{id:1},{id:2}],
},
toShowItem(e) {
 let that = this;
 let id = e.currentTarget.dataset.id,
  show = e.currentTarget.dataset.show;
 that.data.list.forEach(function (v) {
  if (v.id == id) {
  v.show = !show;//这里污染原始数组数据
  }
 })
 //利用污染,对列表设置值
 this.setData({
  list: this.data.list
 })
 }
})

wxml:

<view wx:for="{{list}}" wx:key="{{index}}" wx:for-item="item">
 <view bindtap="toShowItem" data-id='{{item.id}}' data-show='{{item.show}}'>
  <text>{{item.show?'收起明细':'明细'}}</text>
 </view>
 <view class="{{item.show ? 'db' : 'dn'}}">
  这里是你展开收起的内容
 </view>
</view>

这里只是分享一个想法,要是想用直接粘贴,是达不到效果图的效果的,毕竟不是所有的样式都放上来了。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
页面中iframe相互传值传参
Dec 13 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
JavaScript类的写法
Sep 17 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 Javascript
jquery实现简单自动轮播图效果
Jul 29 #jQuery
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 #Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 #Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 #Javascript
vuex管理状态仓库使用详解
Jul 29 #Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 #Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 #Javascript
You might like
PHP高级OOP技术演示
2009/08/27 PHP
php函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
PHP生成压缩文件实例
2015/02/07 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
用python生成1000个txt文件的方法
2018/10/25 Python
python学生管理系统学习笔记
2019/03/19 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
优秀部门获奖感言
2014/02/14 职场文书
教师职位说明书
2014/07/29 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
教师年终个人总结
2015/02/11 职场文书
会计求职简历自我评价
2015/03/10 职场文书
稽核岗位职责范本
2015/04/13 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
联谊会开场白
2015/06/01 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
nginx部署多前端项目的几种方法
2021/05/25 Servers
Mysql文件存储图文详解
2021/06/01 MySQL
Python OpenCV实现图形检测示例详解
2022/04/08 Python