微信小程序实现文件目录树结构展示

微信小程序文件夹目录树结构

最近做微信小程序，碰到列表展示客户信息。含有二级目录，想做成资源管理器那种目录树，加减号显示文件目录。找了好久小程序官方文档，没有找到百度也没有，只能自己琢磨了。多了不说，直接上代码和需求。

1. 后台接口返回数据格式：

{
  "data": [
    {
      "id": 2,
      "sets_name": "分组1",
      "file_path": null,
      "create_time": "2019-06-29 18:22:03",
      "username": "长城",
      "realname": "测试1"
    },
    {
      "id": 7,
      "sets_name": "分组5",
      "file_path": null,
      "create_time": "2019-06-25 18:22:56",
      "username": "张三",
      "realname": "张飞"
    },
    {
      "id": 6,
      "sets_name": "分组4",
      "file_path": null,
      "create_time": "2019-06-25 18:22:52",
      "username": "admin222",
      "realname": "关羽"
    },
    {
      "id": 5,
      "sets_name": "分组3",
      "file_path": null,
      "create_time": "2019-06-25 18:22:48",
      "username": "Brook3",
      "realname": "小水心"
    },
    {
      "id": 3,
      "sets_name": "武城县XX镇辛庄村",
      "file_path": "\\public\\uploads\\mapFiles\\20190626\\b96160a10c7628a3f6f9e1c2e218090c.kml",
      "create_time": "2019-06-25 18:22:27",
      "username": "测试",
      "realname": "张三"
    },
    {
      "id": 1,
      "sets_name": "更新11",
      "file_path": "\\public\\uploads\\mapFiles\\20190626\\6389bfec3a580a0fafb83d3fbed04027.kml",
      "create_time": "2019-06-25 18:12:55",
      "username": "测试13",
      "realname": "曹操"
    },
    {
      "id": 4,
      "sets_name": "分组2",
      "file_path": null,
      "create_time": "2019-06-19 18:22:45",
      "username": "测试2",
      "realname": "刘备"
    },
    {
      "id": 8,
      "sets_name": "分组6",
      "file_path": null,
      "create_time": "2019-06-05 18:23:00",
      "username": "测试11",
      "realname": "夏侯惇"
    }
  ],
  "code": 200,
  "msg": "请求成功",
  "result": true,
  "count": 8
}

2. 看出是个二维数组，在小程序双重循环展示。结构就是这样
   3.右边小图标是自己在网上随便找的
   4.想做成这样的
   
   5、点击加减号的时候展开关闭文件夹的效果
   6、遇到的问题：给加减号绑定事件，控制二级目录的显示隐藏。但是由于是遍历出来的，控制隐藏的变量名字相同，会出发所有所有的隐藏显示事件。
   7、解决办法：控制隐藏的变量每个循环获得的值都不同。就从返回数据中选择一个变量放到hidden属性中item.sets_id。将循环的index传给当前点击事件，便于后面区分是谁出发的点击事件（关键点），而且默认显示都是hidden=true，隐藏子级文件（小得意一下）。
   加减号图标分别使用wx:if 和 hidden保证只出现一个（小技巧）。

<view class="weui-cells weui-cells_after-title" wx:for="{{customerList}}" wx:key="{{key}}">
            <view class="weui-cell">
                <view class="weui-cell__bd sets_name">{{item.sets_name}}</view>
                <image class='detail' src='../images/+.jpg' wx:if="{{item.sets_id}}" bindtap='detailShow' id="{{index}}"></image>
                <image class='retract' src='../images/-.jpg' hidden="{{item.sets_id}}"  bindtap='retractShow' id="{{index}}"></image>
            </view>
            <view hidden="{{item.sets_id}}" class="customer">
              <view class="weui-ce" wx:for="{{item.customerList}}" wx:key="{{key}}" 
                  style='margin-top:5px;background-color:#fff;'>
                 ............................
              </view>
            </view>
        </view>

8、js文件setData中使用的是变量赋值，[]里面可变变量名字（这个第一次用，关键点）。customerList是返回数据的名字

  /**
   * 查看分组列表
   */
  detailShow: function(e){
    var index = e.currentTarget.id
    var show = 'customerList[' + index +'].sets_id'
    this.setData({
      [show]: ''
    });
   
  },
  //隐藏列表
  retractShow: function(e){
    var index = e.currentTarget.id
    var show = 'customerList[' + index + '].sets_id'
    this.setData({
      [show]: true
    });
  },

9、主要是保证区别打开文件夹，区别关闭。使用动态的id给元素定义hidden属性，并且赋值给动态变量