前言:微信小程序并没有提供这样的组件 ,vant也没有,就自己写了一个
技术点:
1、组件自身递归
2、父子间事件通信 (需要层层向上传递)
子组件:
wxml文件 <view class="tree-box"> <view style="padding-left: 30rpx"> <view class="item" wx:for="{ {treeList}}" wx:key="*this"> <view> <van-icon custom-style="{ {item.collapse?'transform:rotate(90deg)':'transform:rotate(0deg)'}}" name="play" wx:if="{ {item.children}}" bind:tap="showChildren" data-id="{ {item.id}}"/> <text class="{ {item.selected?'current':''}}" data-id="{ {item.id}}" bind:tap="handleClick">{ {item.text}}</text> </view> <block wx:if="{ {item.children&&item.collapse}}"> <tree class="tree" treeList="{ {item.children}}" bind:handleClick="treeClick"></tree> </block> </view> </view> </view>
js文件
//树形单选组件 Component({ properties:{ treeListIndex: {// 默认为0,当前循环的第几层,用于tree样式展示 type: Number, value: 0 }, treeList: Array, }, data:{ key:Math.random(), treeArr:[ { id:1, text:'一级', collapse:true, selected:false, children:[ { id:"1-1", text:"二级-1", }, { id:"1-2", text:"二级-2", children:[ { id:"1-2-1", text:"2-三级-1" } ] }, ] } ], isExec:false, currentIndex:"", currentItem:"" }, observers:{}, methods:{ showChildren(e){ let id = e.currentTarget.dataset.id this.setData({ isExec:!this.data.isExec }) this.findCurrentItem(id,this.data.treeList,'collapse') this.setData({ treeList:this.data.treeList }) }, /** * @t 功能类型 collapse:点击图标展开收起,title:点击标题事件 * */ findCurrentItem(id,list,t=''){ let item ="" list.forEach(it=>{ if(it.id==id){ if(t=='collapse'){ it.collapse = !it.collapse } if(t=="title"){ it.selected = !it.selected } item = it }else{ if(t=="title"){ it.selected =false } if(it.children){ this.findCurrentItem(id,it.children,t) } } }) return item }, handleClick(e){ let id = e.currentTarget.dataset.id let arrs = [...this.data.treeList] let item =this.findCurrentItem(id,arrs,"title") this.setData({ currentIndex:id, treeList:arrs, currentItem:item }) wx.setStorageSync("tree-item",item) this.triggerEvent("handleClick",{item}) }, //递归接收 treeClick(e){ let {item} = e.detail this.triggerEvent("handleClick",{item}) } }, created(){ }, lifetimes:{ attached: function() { this.data.treeArr = JSON.parse(JSON.stringify(this.data.treeList)) }, detached: function() { // 在组件实例被从页面节点树移除时执行 }, } })
json文件
父组件:
json文件: