Sow nothing reap nothing

微信小程序手风琴折叠面板简单实现

已有227次关注

实现思路:首先mock数据需要是上下层级关系,比如数组对象等,通过改变第一级数据字段show的状态为true或者false,来改变下级数据展示即可。

效果图:
微信小程序手风琴折叠面板.gif

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});
  },

})

已自动关闭评论