循环列表展开关闭效果 - 案例下载地址
1、循环列表，点击展开，再次点击关闭
html部分
<view class="listMain"><view class="list" wx:for="{{list}}" wx:key="index"><view class="title">{{item.title}}</view><view class="desc {{item.isShow ? 'show' : 'hide'}}">{{item.desc}}</view><text class="listBtn" bindtap="listBtn" wx:if="{{!item.isShow}}" data-index="{{index}}">展开</txt><text class="listBtn" bindtap="listBtn" wx:if="{{item.isShow}}" data-index="{{index}}">关闭</text></view></view>
css部分
.listMain {padding: 30rpx;}.listMain .list{border-bottom: 1rpx solid #ddd;padding: 20rpx 10rpx;position: relative;}.listMain .list .title{font-size: 30rpx;color: #333;width: 80%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;margin-bottom: 10rpx;}.listMain .list .desc{font-size: 24rpx;color: #666;}.listMain .list .listBtn{position: absolute;right: 20rpx;top: 20rpx;color: #999;font-size: 26rpx;}.show{display: block;}.hide{display: none;}
data部分
list: [{title: '前端技术汇总',isShow: false,desc: 'html、div+css+js、选择器、居中、闭包、继承、网站重构、优化、迭代、盒模型、BFC、数组、深浅拷贝、本地存储、清除浮动、状态码等等'}, {title: '前端技术框架',isShow: false,desc: 'vue、angular、react、bootstrap、backbone、jquery、lay ui、amaze ui、zepot、ionic、flutter、require、echart等等'}, {title: '前端技术延伸',isShow: false,desc: '什么是前端，简单讲就是在程序开发中，跟美工设计人员打交道比较多的部分。或者讲是展现给多数用户的操作界面部分，操作界面可以是实体的（比如遥控器、按键面片等），也可以是虚拟的（比如显示器里的各种窗口）。大多数情况下，我们使用的是虚拟界面，也就是利用计算机图形功能，在显示器中画出来供我们操作的部分。虚拟界面的好处就是输入设备简单（通常一个鼠标加一块键盘就行了），还有就是灵活容易变通，如果客户对界面不太满意，改动起来相对容易点。因为是虚拟的图形，所以理论上是可以任意进行延伸的，比如二维的图形不能满足要求了，还可以三维的设计。'}, {title: '后端技术',isShow: false,desc: '很多人在开发过程中不太关注数据库，对于表结构的设计也没什么讲究大多属于“能用就行”，但是根据作者将近十年的开发经验来看的话，只要你是从事 Web 相关领域开发你就无法避免不和数据库打交道，在Web开发中大多功能操作本质上都是对数据库进行操作，不管你用是 Pythod，Java，Ruby 等语言进行 Web 开发，你其实都是在面向数据库进行编程'}, {title: 'UI设计师',isShow: false,desc: 'UI，即用户界面（User Interface）是系统和用户之间进行交互和信息交换的媒介。简而言之，UI设计师就是设计用户界面。一般我们手机上app的界面都是UI设计师需要设计的。通俗易懂点说，UI就是做界面的，最重要的部分是app界面，看到手机里各种app没？大部分展现在你面前的东西，都是UI设计师需要做的。'}]
js点击事件
listBtn (e) {var that = thislet index = e.currentTarget.dataset.indexlet currect = "list["+index+"].isShow"if (that.data.list[index].isShow === true) {console.log("隐藏")that.setData({[currect]: false})} else{console.log("显示")that.setData({[currect]: true})}}
有一些情况下后台不传给你标示（isShow）这就需要自己js手动添加
下面的map以及forEach都可以手动添加isShow字段
onLoad: function () {var that = thislet dataList = that.data.list// dataList.forEach(function(item, index){// dataList[index].isShow = false// })dataList.map((item, index)=>{dataList[index].isShow = false})that.setData({list: dataList})},
2、循环列表，点击展开，其余的关闭
data数据以及html和css代码同上面一样
listBtn (e) {let that = thislet index = e.currentTarget.dataset.indexlet dataList = that.data.listdataList[index].isShow = !dataList[index].isShowif (dataList[index].isShow){that.packUp(dataList,index);}that.setData({list: dataList})},packUp(data,index){for (let i = 0, len = data.length; i < len; i++) {if(index!=i){data[i].isShow = false}}},
多层展开关闭列表
<view class='list_box' wx:for='{{list}}' wx:key='this' wx:for-item='parentItem' wx:for-index='parentIndex' ><view class='list'><view class='list_name_box' catchtap='listTap' data-parentindex='{{parentIndex}}'><text class='list_item_name'>{{parentItem.listName}}</text><text class='icon_down' wx-if='{{parentItem.show&&"icon_down_rotate"}}'>关闭</text><text class='icon_down' wx:else >展开</text></view><view class='list_item_box' wx:if='{{parentItem.show}}'><view class='list_item' wx:for='{{parentItem.item}}' wx:key='this' catchtap='listItemTap' data-index='{{index}}' data-parentindex='{{parentIndex}}'><view class='list_item_name_box'><text class='list_item_name'>{{item.itemName}}</text><text class='icon_down' wx:if='{{item.show&&"icon_down_rotate"}}'>关闭</text><text class='icon_down' wx:else >展开</text></view><view class='other_box' wx:if='{{item.show}}'><view class='other'><text class='other_title'>内容：</text><text class='other_text'>{{item.content}}</text></view><view class='other'><text class='other_title'>时间：</text><text class='other_text'>{{item.time}}</text></view></view></view></view></view></view>
page{background: #f3f7f7;}.list_name_box{background: #fff;border-bottom: 1px solid #efefef;display: flex;height: 90rpx;align-items: center;padding: 0 25rpx;font-size: 32rpx;}.list_item_name{flex: 1;}.list_item_name_box{background: #fff;font-size: 30rpx;height: 80rpx;display: flex;align-items: center;padding: 0 25rpx 0 50rpx;}.other{display: flex;height: 80rpx;padding: 0 25rpx 0 50rpx;align-items: center;font-size: 30rpx;color: #666;}.icon_down_rotate{transform:rotate(180deg);}
list:[{listName:'列表1',item:[{itemName:'子列表1-1',content:'1-1中的内容',time: '-05-06'}, {itemName: '子列表1-2',content: '1-2中的内容',time: '-04-13'}, {itemName: '子列表1-3',content: '1-3中的内容',time: '-12-06'}]}, {listName: '列表2',item: [{itemName: '子列表2-1',content: '2-1中的内容',time: '-05-06'}, {itemName: '子列表2-2',content: '2-2中的内容',time: '-08-06'}, {itemName: '子列表2-3',content: '2-3中的内容',time: '-11-06'}]}, {listName: '列表3',item: [{itemName: '子列表3-1',content: '3-1中的内容',time: '-05-15'}, {itemName: '子列表3-2',content: '3-2中的内容',time: '-05-24'}, {itemName: '子列表1-3',content: '3-3中的内容',time: '-05-30'}]}]
//点击最外层列表展开收起
listTap(e){console.log('触发了最外层');let Index = e.currentTarget.dataset.parentindex,//获取点击的下标值list=this.data.list;list[Index].show = !list[Index].show || false;//变换其打开、关闭的状态if (list[Index].show){//如果点击后是展开状态，则让其他已经展开的列表变为收起状态this.packUp(list,Index);}this.setData({list});},//点击里面的子列表展开收起listItemTap(e){let parentindex = e.currentTarget.dataset.parentindex,//点击的内层所在的最外层列表下标Index=e.currentTarget.dataset.index,//点击的内层下标list=this.data.list;console.log(list[parentindex].item,Index);list[parentindex].item[Index].show = !list[parentindex].item[Index].show||false;//变换其打开、关闭的状态if (list[parentindex].item[Index].show){//如果是操作的打开状态，那么就让同级的其他列表变为关闭状态，保持始终只有一个打开for (let i = 0, len = list[parentindex].item.length;i<len;i++ ){if(i!=Index){list[parentindex].item[i].show=false;}}}this.setData({list});},//让所有的展开项，都变为收起packUp(data,index){for (let i = 0, len = data.length; i < len; i++) {//其他最外层列表变为关闭状态if(index!=i){data[i].show = false;for (let j=0;j<data[i].item.length;j++){//其他所有内层也为关闭状态data[i].item[j].show=false;}}}},
