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


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 相关文章推荐
js实现页面转发功能示例代码
Aug 05 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
VUE路由动态加载实例代码讲解
Aug 26 Javascript
js实现图片实时时钟
Jan 15 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 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
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
react-router实现按需加载
2017/05/09 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
Python用threading实现多线程详解
2017/02/03 Python
Django rest framework实现分页的示例
2018/05/24 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
对python周期性定时器的示例详解
2019/02/19 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
高中语文教学反思
2014/01/16 职场文书
绩效工资实施方案
2014/03/15 职场文书
六一亲子活动总结
2014/07/01 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
十八大标语口号
2014/10/09 职场文书
2014年检验科工作总结
2014/11/22 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
2016大一新生军训感言
2015/12/08 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书