实现思路:首先mock数据需要是上下层级关系,比如数组对象等,通过改变第一级数据字段show的状态为true或者false,来改变下级数据展示即可。
效果图:
wxml代码:
<view class="container">
<view class="org_content">
<view class="org_title">
<view class="org_town">
<text>手风琴折叠面板</text>
</view>
</view>
<view class="org_group" wx:for="{{mockData}}" wx:key="index" >
<view class="group_first"data-index="{{index}}" bindtap="viewScoreItem">
<view class="group_left">
<text class="all">{{item.deptName}}</text>
<text class="num">({{item.num}})</text>
</view>
<image class="group_right {{item.show == true ? 'active' : ''}}" src="../../assets/icons/org_list_arrow.png"></image>
</view>
<view class="group_list" wx:if="{{item.show == true}}">
<view class="group_item" wx:for="{{item.children}}" wx:for-item="user" wx:key="index">
<view class="item_name">
<text>{{user.name}}</text>
</view>
<view class="item_group">{{user.group}}</view>
</view>
</view>
</view>
</view>
</view>
wxss代码:
.container{background: #f6f6f6;min-height: 100vh;}
.org_content{margin: 24rpx 30rpx 0 30rpx;}
.org_title{height: 60rpx;padding: 16rpx 24rpx;border-radius: 20rpx 20rpx 0px 0px;background: rgba(130, 206, 255, .1);display: flex;align-items: center;}
.org_title .org_town{display: flex;font-weight: bold;font-size: 28rpx;color: #333333;align-items: center;}
.group_first{display: flex;justify-content: space-between;align-items: center;padding: 28rpx 24rpx;background: #ffffff;border-bottom: 1px solid rgba(223, 223, 223, .5);}
.org_group:last-child .group_first{border: none;border-radius: 0 0 20rpx 20rpx;}
.org_group .group_left{display: flex;align-items: center;}
.org_group .group_left .all{font-size: 28rpx;color: #333333;margin-right: 12rpx;}
.org_group .group_left .num{font-weight: normal;font-size: 28rpx;color: rgba(1,144,254,1);}
.org_group .group_right{width: 20rpx;height: 21rpx;}
.org_group .group_right.active{transform: rotate(90deg);}
.group_list{margin: 24rpx 0;border-radius: 20rpx;background: #ffffff;}
.group_item{display: flex;justify-content: space-between;align-items: center;border-bottom: 1rpx solid rgba(223, 223, 223, .5);padding: 24rpx 30rpx;}
.group_item.no_data{text-align: center;font-size: 28rpx;color: #333333;font-weight: normal;display: block;}
.group_item:last-child{border: none;}
.group_item .item_name{display: flex;align-items: center;width: 220rpx;}
.group_item .item_name text,
.group_item .item_group{font-size: 28rpx;color: #333333;font-weight: normal}
js代码:
Page({
/**
* 页面的初始数据
*/
data: {
mockData: [
{
"deptName":"A组",
"num": 1,
"show": true,
"children":[
{
"name":"张山1",
"group":"A组"
}
]
},
{
"deptName":"B组",
"num": 3,
"children":[
{
"name":"张山2",
"group":"A组"
},
{
"name":"张山3",
"group":"A组"
},
{
"name":"张山4",
"group":"A组"
},
]
},
{
"deptName":"C组",
"num": 2,
"children":[
{
"name":"张山5",
"group":"C组"
},
{
"name":"张山6",
"group":"C组"
}
]
}
]
},
/**
* 分组展示
* @param {*} e 参数
*/
viewScoreItem(e) {
let indexs = e.currentTarget.dataset.index;
let datas = this.data.mockData;
datas[indexs].show ? datas[indexs].show = false : datas[indexs].show = true;
this.setData({mockData: datas});
},
})