微信小程序商城类项目使用到的前端效果（3）——树状图

本文链接：https://blog.youkuaiyun.com/Luxuriant_tree/article/details/103591393

本文详细介绍了一种在微信小程序中实现人员列表及其子列表的折叠与展开效果的方法。通过wx:for循环遍历人员数据，并使用wx:key进行唯一标识，结合data-index和data-index2属性实现了多层次的列表切换。同时，利用wxss样式定义了列表项的显示样式，包括图标、昵称和子列表数量等。在JS部分，通过toggleList函数根据点击事件改变列表的open状态，从而控制子列表的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

树状图
wxml

<view class="person-list">
      <view class="p-item" wx:for="{{personList}}" wx:key="{{index}}">
        <!-- 显示 -->
        <view class="p-intro {{item.son.length?'item':''}}" bindtap="toggleList" data-index="{{index}}">
          <image class="p-avatar" src="{{item.avatar}}"></image>
          <view class="p-info">
            <text class="p-nickname">{{item.nickname}}</text>
            <image wx:if="{{item.son.length}}" class="p-icon" src="/images/my/person.png"></image>
            <text wx:if="{{item.son.length}}" class="p-son-count" style="color:#bfbfbf">{{item.son.length}}</text>
          </view>
        </view>
        <!-- 子列表 -->
        <view class="p-son-list" wx:if="{{item.son.length && item.open}}">
          <view class="son-item" wx:for="{{item.son}}" wx:key="idx" wx:for-index="idx">
            <!-- 显示 -->
            <view class="p-intro {{item.son.length?'item':''}}" bindtap="toggleList" data-index="{{index}}" data-index2="{{idx}}">
              <image class="p-avatar" src="{{item.avatar}}"></image>
              <view class="p-info">
                <text class="p-nickname">{{item.nickname}}</text>
                <image wx:if="{{item.son.length}}" class="p-icon" src="/images/my/person.png"></image>
                <text wx:if="{{item.son.length}}" class="p-son-count" style="color:#bfbfbf">{{item.son.length}}</text>
              </view>
            </view>
            <!-- 子列表 -->
            <view class="p-son-list" wx:if="{{item.son.length && item.open}}">
              <view class="son-item" wx:for="{{item.son}}" wx:key="i">
                <!-- 显示 -->
                <view class="p-intro {{item.son.length?'item':''}}">
                  <image class="p-avatar" src="{{item.avatar}}"></image>
                  <view class="p-info">
                    <text class="p-nickname">{{item.nickname}}</text>
                    <image wx:if="{{item.son.length}}" class="p-icon" src="/images/my/person.png"></image>
                    <text wx:if="{{item.son.length}}" class="p-son-count" style="color:#bfbfbf">{{item.son.length}}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

wxss

.person-list{
  padding:20rpx;
}
.item{
  position:relative;
}
.item::after{
    content: '';
    position: absolute;
    right: 5vw;
    top: 50%;
    margin-top: -4px;
    border-top: 1px solid #aaa;
    border-right: 1px solid #aaa;
    transform: rotate(45deg);
    width: 8px;
    height: 8px;
}
.p-item{
  padding:20rpx 0; 
  border-bottom:1px dotted #bfbfbf;
}
.p-intro{
  display: flex;
  align-items: center;
}
.p-avatar{
  width: 80rpx;
  height:80rpx;
  border-radius: 40rpx;
  margin-right: 15rpx;
}
.p-info{
  display: flex;
}
.p-nickname{
  font-size: 30rpx;
}
.p-icon{
  width: 30rpx;
  height:30rpx;
  margin-left: 10rpx;
}
.p-son-count{
  font-size: 25rpx;
  color:#bfbfbf;
}
.p-son-list{
  padding:20rpx 0 20rpx 50rpx;
}

const app = getApp()

Page({

  /**
    * 页面的初始数据
    */
  data: {
    personList: [
      {
        avatar: "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTI8jxYTsSXIh62SZt7FmZGUc3GYu0DQ7tAtrw5h5pQicuHicDDokab55iaU9OUvKiaclnR3ekkGy3loYA/132",
				id: 106,
        nickname: "易慧",
        son:[
          {
            avatar: "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKXscxmmbq1N2deiads7loorKibXlDj0ichViaCEY6nFu0v0TnNH2D6bxMWT6adibME8seXqoQnHfGyvjQ/132",
						id: 128,
            nickname: "DcHy",
            son: []
          }
        ]
      },
      {
        avatar: "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTI8jxYTsSXIh62SZt7FmZGUc3GYu0DQ7tAtrw5h5pQicuHicDDokab55iaU9OUvKiaclnR3ekkGy3loYA/132",
        id: 106,
        nickname: "易慧",
        son: [
          {
            avatar: "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKXscxmmbq1N2deiads7loorKibXlDj0ichViaCEY6nFu0v0TnNH2D6bxMWT6adibME8seXqoQnHfGyvjQ/132",
            id: 128,
            nickname: "DcHy",
            son: []
          }
        ]
      },
    ],
  },
  onLoad: function (options) {
    if (this.data.personList > 0) {
      this.wxFor(this.data.personList);
    }
  },
  // 遍历数据添加open表示是否打开
  wxFor: function (data) {
    var that = this
    for (var i = 0; i < data.length; i++) {
      if (data[i].son) {
        if (data[i].son.length > 0) {
          data[i].open = false;
          this.wxFor(data[i].son)
        } else {
          if (i == data.length - 1) {
            that.setData({
              personList: data
            })
          }
        }
      }
    }
  },
  toggleList: function (e) {
    var data = this.data.personList;
    if (e.currentTarget.dataset.index != undefined) {
      data[e.currentTarget.dataset.index].open = !data[e.currentTarget.dataset.index].open;
    }
    if (e.currentTarget.dataset.index2 != undefined) {
      data[e.currentTarget.dataset.index].open = true;
      data[e.currentTarget.dataset.index].son[e.currentTarget.dataset.index2].open = !data[e.currentTarget.dataset.index].son[e.currentTarget.dataset.index2].open;
    }
    this.setData({
      personList: data
    })
  },
})