Préface : L'applet WeChat ne fournit pas un tel composant, pas plus que vant, donc j'en ai écrit un moi-même
Remarques techniques :
1. Le composant lui-même est récursif
2. Communication d'événement entre parent et enfant (doit être transmis couche par couche)
Sous-ensemble :
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':''}}" données -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>
fichier js
//Composant radio en forme d'arborescence
Component({
properties :{
treeListIndex : {//La valeur par défaut est 0, quelle couche de la boucle actuelle est utilisée pour le type d'affichage arborescent
: Number,
value : 0
},
treeList : Array,
} ,
data :{
key:Math.random(),
treeArr:[
{
id:1,
text:'Level 1',
collapse:true,
selected:false,
children:[
{
id:"1-1",
text:" Niveau 2 -1",
},
{
id:"1-2",
this.setData({
text:"二级-2",
children:[
{
id:"1-2-1",
text:"2-三级-1"
}
]
},
]
}
],
isExec:false,
currentIndex:"",
currentItem :""
},
observateurs :{},
méthodes :{
showChildren(e){
let id = e.currentTarget.dataset.id
isExec :!this.data.isExec
})
this.findCurrentItem(id,this.data.treeList,'collapse')
this.setData({
treeList:this.data.treeList
})
},
/**
* @t function type collapse : cliquez sur l'icône pour développer et réduire, title : Cliquez sur l'événement de titre
* */
findCurrentItem(id,list,t=''){
let item = ""
list.forEach(it=>{
if(it.id==id){
if(t== 'collapse') {
it.collapse = !it.collapse
}
if(t=="title"){
item = it
}else{
it.selected = !it.selected
}
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})
},
// recevoir récursivement
treeClick(e){
let {item} = e.detail
this.triggerEvent( "handleClick",{item})
}
},
created(){
},
durées de vie :{
attaché : function() {
this.data.treeArr = JSON.parse(JSON.stringify(this.data.treeList))
},
détaché : function() {
// Exécuté lorsque l'instance du composant est supprimée de l'arborescence des nœuds de page
},
}
})
fichier json
composant parent :
fichier json :
