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


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 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
javascript一点特殊用法
May 28 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
Jan 21 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
Vue实现计算器计算效果
Aug 17 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
多重?l件?合查?(一)
2006/10/09 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
基于jquery的跨域调用文件
2010/11/19 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
Django REST framework内置路由用法
2019/07/26 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
Python对excel的基本操作方法
2021/02/18 Python
处理textarea中的换行和空格
2019/12/12 HTML / CSS
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
Java面试题及答案
2012/09/08 面试题
药学专业大学生自荐信
2013/09/28 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
民主生活会意见
2015/06/05 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书