WeChat アプレット ツリー選択コンポーネント

序文: WeChat アプレットはそのようなコンポーネントを提供しておらず、機能もしていないので、自分で作成しました

技術的なポイント:

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({
    プロパティ:{ 
        treeListIndex: {//デフォルトは 0、現在のループのどのレイヤーがツリー スタイルの表示に使用されるか
            type: Number, 
            value: 0 
        }, 
        treeList: Array, 
    } , 
    data :{ 
        key:Math.random(), 
        treeArr:[ 
            { 
                id:1, 
                text:'Level 1', 
                collapse:true, 
                selected:false, 
                children:[ 
                    { 
                        id:"1-1", 
                        text:"レベル 2 -1", 
                    }, 
                    {
                        id:"1-2", 
                        text:"二级-2", 
                        children:[ 
                            { 
                                id:"1-2-1", 
                                text:"2-三级-1" 
                            } 
                        ] 
                    }, 
                ] 
            } 
        ], 
        isExec :false, 
        currentIndex:"", 
        currentItem:"" 
    },
    オブザーバー:{},
    メソッド:{ 
        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 関数型の折りたたみ: アイコンをクリックして展開と折りたたみを行います。 title: タイトルイベントをクリック
         * */ 
        findCurrentItem(id,list,t=''){ 
            let item = "" 
            list.forEach(it=>{ 
                if(it.id==id){ 
                    if(t== 'collapse') { 
                        it.collapse = !it.collapse 
                    } 
                    if(t=="タイトル"){ 
                    item = it 
                }else{ 
                        it.selected = !it.selected
                    } 
                treeList:arrs,
                    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, 
                currentItem:item 
            })
            wx.setStorageSync("tree-item",item) 
            this.triggerEvent("handleClick",{item}) 
        }, //再帰的に
        treeClick(e)
        を受け取る{ 
            let {item} = e.detail 
            this.triggerEvent("handleClick" ,{item}) } 
        } 
    、
    created(){ 
    }、
    lifetimes:{
        添付: function() { 
            this.data.treeArr = JSON.parse(JSON.stringify(this.data.treeList)) 
        }、
        分離: function( ) { 
            // コンポーネント インスタンスがページ ノード ツリーから削除されたときに実行される
        }, 
    } 
})

jsonファイル

 

 

親コンポーネント:

 

 

 json ファイル: