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


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 相关文章推荐
html下载本地
Jun 19 Javascript
jQuery编写widget的一些技巧分享
Oct 28 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
vue.js中$set与数组更新方法
Mar 08 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 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
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
Yii快速入门经典教程
2015/12/28 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
javascript 写类方式之五
2009/07/05 Javascript
面向对象的javascript(笔记)
2009/10/06 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
美国创意之家:BulbHead
2017/07/12 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
工程材料采购方案
2014/05/18 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
压缩Redis里的字符串大对象操作
2021/06/23 Redis
vue elementUI表格控制对应列
2022/04/13 Vue.js