微信小程序之折叠面板--数据动态化、可实现多级

.cell-class{
  display: block;
  width: 100%;
  border-bottom: 4rpx solid #EBEBEB;
  font-size:26rpx;
}
.kind-list-item-bd {
  height: 0;
  overflow: hidden;
}
.kind-list-item-bd-show {
  height: auto;
}
.kind-list-item-bd-list {
  height: 0;
  overflow: hidden;
}
.kind-list-item-bd-show-list-item {
  height: auto;
}
.clear {
  clear: both;
}
.borderContainer {
  height: 10vw;
  line-height: 10vw;
  background-color: #5cacee;
}
.show {
  background-color: #9f9f9f;
}
.rightBorder {
  float: right;
  padding-right: 2vw;
}

.rightBorder1 {
  float: right;
  padding-right: 2vw;
}

.rightBorder2 {
  display: flex;
  align-items: center;
}
.dataBorder {
  /* height: 12vw; */
  line-height: 12vw;
}

.dataBorder1 {
  background-color: #9f9f9f;
  font-size: 28rpx;
  color: #fff;
}

.dataBorder2 {
  border-bottom: 2rpx solid #fff;
}
.dataBorder3 {
  background-color: #5cacee;
  font-size: 28rpx;
  color: #fff;
}

.lefrBorder {
  float: left;
}

.nickText {
  margin: 0vw 3vw;
  display: inline-block;
}

.homeId {
  margin: 0vw 5vw;
  color: #fff;
  display: inline-block;
}

.borderLeft {
  width: 35%;
}

.borderRight {
  width: 2rpx;
  height: 10vw;
  background-color: #ccc;
}

.borderRight1 {
  width: 55%;
}

.showText {
  height: 12vw;
  line-height: 12vw;
  display: flex;
  justify-content: space-between;
  font-size: 25rpx;
  border-bottom: 2rpx solid #ebebeb;
}

.showText1 {
  padding-right: 1vw;
  background-color: #eee;
}

.showText2 {
  margin: 0vw 3vw;
}

.showText3 {
  margin: 0 2vw;
  display: inline-block;
}

<view wx:for="{{homelistkey}}" wx:for-index="index" dat wx:for-item="item" wx:key="index" class="dataBorder2">
  <view>
    <view class="dataBorder" bindtap="onTap" data-homeid="{{item.homeId}}" data-ide="{{index}}" data-id="{{item.id}}"
      data-change="{{item.change}}">
      <view class="{{item.homeId==nowText?\'dataBorder3\':\'dataBorder1\'}}">
        <view class="lefrBorder">
          <view class="nickText" bindlongtap="updateHomeName" data-id="{{item.homeId}}">
            {{item.homeName}}
          </view>
          <view class="homeId">{{item.homeId}}</view>
        </view>
        <view wx:if="{{item.homeId==nowText}}" class="rightBorder1">
          <view class="rightBorder2">
            右布局
          </view>
        </view>
        <view wx:else class="rightBorder" data-globalid="{{item.homeId}}" catchtap="addHomePersion">
        </view>
        <view class="clear"></view>
      </view>
      <view class="kind-list-item-bd {{item.onClick? \'kind-list-item-bd-show\' : \'\'}}">
        <view>
          <!-- <slideitem id="slideitem-{{index}}" class=\'cell-class\' row="{{index}}" itemColor="#fff"
            data-homeid="{{item.homeId}}" data-userphone="{{items.userPhone}}" catch:deleteItemEvent=\'deleteAction\'
            catch:slideItemEvent=\'slideAction\' cellHeight="120rpx" wx:for="{{item.dataList}}" wx:for-item="items"
            wx:key="{{index}}" wx:for-index="idx" data-item="{{items}}"> -->
            <view wx:for="{{item.dataList}}" wx:for-item="items"  wx:for-index="idx" wx:key="idx" data-item="{{items}}">
            <view catchtap="clickItem" data-homeid="{{items.homeId}}" data-ide="{{index}}" data-id="{{items.id}}"
              data-change="{{items.change}}">
              <view>
                <view class="showText2" style="float:left;">{{items.userPhone}}</view>
              </view>
              <view class="showText1">
                <view bindtap="updataNameDialog" data-homeid="{{item.homeId}}" data-tel="{{items.userPhone}}"
                  data-usernickname="{{items.userNickname}}" class="showText3">
                  {{items.userNickname}}
                </view>
              </view>
            </view>
            <view class="kind-list-item-bd-list {{items.onClick? \'kind-list-item-bd-show-list-item\' : \'\'}}">
              <view>
                <!-- <slideitem id="slideitem-{{index}}" class=\'cell-class\' row="{{index}}" itemColor="#fff"
                  data-homeid="{{item.homeId}}" data-userphone="{{items.userPhone}}"
                  catch:deleteItemEvent=\'deleteAction\' catch:slideItemEvent=\'slideAction\' cellHeight="120rpx"
                  wx:for="{{items.listItem}}" wx:for-item="gitem" wx:key="{{inde}}" wx:for-index="idx"
                  data-item="{{gitem}}"> -->
                  <view  wx:for="{{items.listItem}}" wx:for-item="gitem" wx:key="idxx" wx:for-index="idxx"
                  data-item="{{gitem}}">
                  <view catchtap="clickItem" data-homeid="{{gitem.homeId}}" data-ide="{{idxx}}" data-id="{{gitem.id}}"
                    data-change="{{gitem.change}}">
                    <view>
                      <view class="showText2" style="float:left;">{{gitem.userPhone}}</view>
                    </view>
                    <view class="showText1">
                      <view bindtap="updataNameDialog" data-homeid="{{item.homeId}}" data-tel="{{gitem.userPhone}}"
                        data-usernickname="{{gitem.userNickname}}" class="showText3">
                        {{gitem.userNickname}}
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

// index/userClick/userClick.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    nowText: \'120000\',
    homelistkey: [{
        id: 0,
        homeName: \'小海\',
        homeId: \'120000\',
        onClick: false,
        isMain: 1,
        dataList: [{
          id: 10,
          userPhone: 11111111111,
          userNickname: \'用户名\',
          onClick: false,
          listItem: [{
            id: 100,
            userPhone: \'1-1-1689-1-1-1-\',
            userNickname: \'12-91用户名\',
          }]
        }, {
          id: 11,
          userPhone: 12121212121,
          userNickname: \'用户名_22\',
            onClick: false,
          listItem: [{
            id: 101,
            userPhone: \'1-1-19031-1-1-1-\',
            userNickname: \'1-0231用户名\',
          }]
        }]
      },
      {
        id: 1,
        homeName: \'张三\',
        homeId: \'1223400\',
        onClick: false,
        isMain: 0,
        dataList: [{
          id: 12,
          userPhone: 232323232323,
          userNickname: \'用户名_57\',
          onClick: false,
          listItem: [{
            id: 102,
            userPhone: \'1-1-1594-1-1-1-\',
            userNickname: \'167用户名\',
          }]
        }, {
          id: 13,
          userPhone: 45454545454,
          userNickname: \'用户名_231\',
            onClick: false,
          listItem: [{
            id: 103,
            userPhone: \'1-1-156-1-1-1-\',
            userNickname: \'1-561用户名\',
          }]
        }]
      },
      {
        id: 2,
        homeName: \'李四\',
        homeId: \'230000\',
        onClick: false,
        isMain: 0,
        dataList: [{
          id: 14,
          userPhone: 16767676767,
          userNickname: \'用户名\',
          onClick: false,
          listItem: [{
            id: 104,
            userPhone: \'1-1-1331-1-1-1-\',
            userNickname: \'1331用户名\',
          }]
        }, {
          id:15,
          userPhone: 13434556789,
          userNickname: \'用户名_21\',
            onClick: false,
          listItem: [{
            id: 105,
            userPhone: \'1-1-1-22-1-1-1-\',
            userNickname: \'1-22用户名\',
          }]
        }]
      }
    ]
  },
  homepasswordInput: function(e) {
    this.setData({
      homePassword: e.detail.value
    })
  },
  //家庭新增人员
  nickNameInput: function(e) {
    this.setData({
      nickName: e.detail.value
    })
  },
  //新的成员名称
  updatenickNameInput: function(e) {
    this.setData({
      updatenickName: e.detail.value
    })
  },
  /**
   * cell绑定事件,删除触发(删除家庭成员以及家庭)
   */
  deleteAction: function(e) {},
  /**
   * cell绑定事件,滑动触发
   */
  slideAction: function(e) {
    //拿到角标
    var row = e.detail.row;
    //获取角标cell
    var slideSender = this.selectComponent("#slideitem-" + row);
    //在data中定义lastSlideSender 属性,用户记录上一个打开的cell
    var lastSlideSender = this.data.lastSlideSender;
    //如果存在已经打开的cell则关闭
    if (lastSlideSender != null && lastSlideSender != slideSender) {
      lastSlideSender.restoreSalid();
    }
    this.setData({
      lastSlideSender: slideSender
    })
  },
  //查询每个家庭的家庭成员
  onTap: function(e) {
    var range = [];
    var range1 = [];
    var r;
    var key = e.currentTarget.dataset.ide;
    let homelistkey = this.data.homelistkey;
    var homeid = e.currentTarget.dataset.homeid;
    var userphone = e.currentTarget.dataset.userphone;
    homelistkey[key].onClick = !homelistkey[key].onClick;
    this.setData({
      homelistkey
    });
  },
  clickItem(e) {
    console.log("这里是子集");
    let that=this;
    const{homelistkey}=that.data;
    var id = e.currentTarget.dataset.id;    
    homelistkey.forEach(item=>{
      item.dataList.forEach(ite => {
        if (ite.id == id) {
          ite.onClick = !ite.onClick;
        }
      })
    })
    console.log(homelistkey);
    that.setData({
      homelistkey
    });
  },

  alertMessage: function() {
    this.setData({
      showModal: true
    })
  },
  bindPickerChange: function(e) {
    //console.log(\'picker发送选择改变，携带值为\', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },
  addHomePersion(e) {
    var globalId = e.currentTarget.dataset.globalid;
    //console.log(globalId);
    this.setData({
      showModal: true,
      globalId
    })
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

　　代码不易，还望鼓励..