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

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

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.idvar show = 'customerList[' + index +'].sets_id'this.setData({[show]: ''});},//隐藏列表retractShow: function(e){var index = e.currentTarget.idvar show = 'customerList[' + index + '].sets_id'this.setData({[show]: true});},

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