⼩程序实现⽂件⽬录树结构展⽰
⼩程序⽂件夹⽬录树结构
最近做⼩程序，碰到列表展⽰客户信息。含有⼆级⽬录，想做成资源管理器那种⽬录树，加减号显⽰⽂件⽬录。了好久⼩程序官⽅⽂档，没有到百度也没有，只能⾃⼰琢磨了。多了不说，直接上代码和需求。
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",
"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属性，并且赋值给动态变量
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论