參考：https://segmentfault.com/a/1190000021286232
工作了一段時間,很久沒寫關(guān)于代碼上的學(xué)習(xí)記錄,這是在公司處理一個樹形控件時尋找解決方法時看到的一篇文章,很有效地幫助到我，非常感謝??！

因為公司的原因,對代碼進行了一些修改,但總體的操作理念比較符合我的需求。

以下的代碼都是關(guān)于微信小程序作為開發(fā)

首先先新建一個放自定義組件的文件夾（components）,組件的名稱根據(jù)自己的開發(fā)來定義,我這邊就稱它為（tree）組件,下面為tree組件的全部代碼
（技巧：新建組件文件一般都是右鍵點擊文件夾-然后選擇 '新建Component'-這樣就能快速新建一個組件文件）也不算啥技巧，估計大家都知道#125

tree.wxml

有些wx:if的判斷可以暫時沒用，因為公司代碼用到，所以我就直接復(fù)制上去了(我比較懶)，還有里面用到的圖片（tick.png），只是一張打勾的圖片，隨便上網(wǎng)找下就是了

<view>
    <block wx:for="{{tree}}" wx:key="index">
        <view style="display:flex;align-items:center;margin-left:{{item.nodes.length !== 0 ? depth*20 : depth*30}}px;font-size:36rpx;margin-top: 5px;"
            wx:if="{{item.category !== 'index'}}">
            <view class="tree_left" wx:if="{{item.nodes.length !== 0}}" data-id="{{item.id}}" data-open="{{item.open}}"
                bindtap="onchange">
                <view class="{{!item.open ? 'icon-right' : 'icon-down'}}"></view>
            </view>

            <view class="{{item.nodes.length !== 0 ?'parent':'node'}} " data-id="{{item.id}}" data-open="{{item.open}}"
                bindtap="onchange">
                {{item.name}}
                <view class="selected" wx:if="{{item.category !== 'index'}}" catchtap="handleClick"
                    data-id="{{item.id}}" data-value="{{item.name}}">
                    <image hidden="{{item.selected === false}}" src="../../pages/image/tick.png"
                        style="width:20px;height:20px;"></image>
                </view>
            </view>
        </view>
        <block wx:if="{{item.nodes}}">
            <view hidden="{{!item.open}}">
                <tree treeList="{{item.nodes}}" id="treeSelect" bind:onclick="click" bind:change="change"
                    depth="{{depth+1}}"></tree>
            </view>
        </block>
    </block>
</view>

tree.wxss

.tree_left{
    position: relative;
    float: left;
}

.icon-down{
    border: 8px solid;
    border-color: transparent transparent #B8B8B8;
    transform: rotate(180deg);
    margin-top: 7px;
    margin-left: 5px;
    margin-right: 10px;
}

.icon-right{
    border: 8px solid;
    border-color: transparent transparent #B8B8B8;
    transform: rotate(90deg);
    margin-left: 5px;
}

.selected{
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 1px solid #D6D6D6;
    float: right;
    margin-left: 5px;
    margin-top: 2px;
}

tree.js

const tranverse = (e) => {
    for (let i in e) {
        if (e[i].nodes) {
            e[i].open = false;
            tranverse(e[i].nodes)
        }
        e[i].selected = false;
    }
}
Component({
    properties: {
        treeList: Object,
        depth: {
            type: Number,
            value: 0
        }
    },
    data: {},
    ready() {
        // const {treeList}=this.properties; 
        const { treeList } = this.data;
        for (let i in treeList) {
            if (treeList[i].nodes) {
                treeList[i].open = false;
                tranverse(treeList[i].nodes);
            }
            treeList[i].selected = false;
        }
        this.setData({
            tree: treeList
        })
    },
    methods: {
        //修改折疊狀態(tài)
        changeOpen(tree, id) {
            for (let i = 0; i < tree.length; i += 1) {
                if (tree[i].id === id) {
                    tree[i].open = !tree[i].open;
                }
                if (tree[i].nodes.length !== 0) {
                    this.changeOpen(tree[i].nodes, id);
                }
            }
            return;
        },
        onchange(e) {
            const { treeList } = this.data;
            const { id } = e.currentTarget.dataset;
            this.changeOpen(treeList, id);
            this.triggerEvent('change', id, { bubbles: true, composed: true });
            this.setData({
                tree: treeList
            })
        },
        change(e) {
            const id = e.detail;
            const { treeList } = this.data;
            this.changeOpen(treeList, id);
            this.setData({
                tree: treeList
            })
        },
        click(e) {
            const t = this.selectAllComponents('#treeSelect');
            t.forEach(item => {
                item.click(e);
            })
            let id = '';
            if (e.detail) {
                id = e.detail.id;
            }
            const { treeList } = this.data;
            this.setStatus(treeList, id);
            this.setData({
                tree: treeList
            })
        },
        handleClick(e) {
            const t = this.selectAllComponents('#treeSelect');
            t.forEach(item => {
                item.click(e);
            })
            //   const {id}=e.currentTarget.dataset;
            const { id, value } = e.currentTarget.dataset;
            const { treeList } = this.data;
            // const value = this.getData(treeList, id)
            this.setStatus(treeList, id);
            this.triggerEvent('onclick', { id, value, treeList }, { composed: true, bubbles: true });
            this.setData({
                tree: treeList
            })
        },
        //切換選中狀態(tài)
        setStatus(tree, id) {
            for (let i = 0; i < tree.length; i += 1) {
                if (tree[i].id == id) {
                    tree[i].selected = true;
                } else {
                    tree[i].selected = false;
                }
                if (tree[i].nodes) {
                    this.setStatus(tree[i].nodes, id);
                }
            }
            return;
        },
        //獲取選中項信息
        getData(tree, id) {
            for (let i = 0; i < tree.length; i += 1) {
                if (tree[i].id === id) {
                    return tree[i].name;
                }
                if (tree[i].nodes) {
                    this.getData(tree[i].nodes, id);
                }
            }
            return '';
        },
    }
})

tree.json

{
    "component": true,
    "usingComponents": {
        "tree": "/components/tree/tree"
    }
}

當你寫完這個tree組件的時候，是時候驗證它的展示效果,
注意：這里的數(shù)據(jù)是寫死的，請根據(jù)自己開發(fā)需求進行代碼上的修改

隨便新建一個Page頁面,為demo頁面

demo.wxml

這個treeList傳的內(nèi)容為一個數(shù)組對象，如：[{..},{...}]，這樣子的數(shù)據(jù)

<tree treeList="{{treeList}}" id="treeSelect" bind:onclick="treeClick"></tree>

demo.wxss

/* 這里沒寫樣式，可以自己設(shè)計 */

demo.json

這里路徑一般根據(jù)自己的項目文件來引用,并不一定要按我的寫法

{
   "usingComponents": {
    "tree": "../../components/tree/tree"
  }
}

demo.js

Page({
     data: {
        treeList: [
            {
                id: '1',
                pid: '0',
                name: '祖先節(jié)點',
                nodes:[
                    {
                        id: '1-1',
                        pid: '1',
                        name: '父節(jié)點1',
                        nodes:[
                            {
                                id: '1-1-1',
                                pid: '1-1',
                                name: '子節(jié)點1',
                                nodes: []
                            }
                        ]
                    },
                    {
                        id: '1-2',
                        pid: '1',
                        name: '父節(jié)點2',
                        nodes:[
                            {
                                id: '1-1-2',
                                pid: '1-1',
                                name: '子節(jié)點2',
                                nodes: []
                            }
                        ]
                    }
                ]
            }
        ]
    },

    treeClick(e) {
        console.log(e)
        const t = this.selectAllComponents('#treeSelect');
        t.forEach(item => {
            item.click(e);
        })
        const { id, value } = e.detail;
        console.log(e.detail)
    }
})

展示效果如下：

樹形控件.gif

總結(jié)：剛開始做公司的這個需求的時候,感覺難度應(yīng)該不大,可惜我是程序員中的菜雞,需要找資料才能解決掉,不懂就百度，這是個日常的操作。不說那么多廢話,這個樹形控件的使用請留意原文章作者的描述（描述的非常詳細）,因為之前用的樹形控件都是不能夠進行單選的操作，所以尋找了很多處理方法都搞不掂，最后找到了這邊文章，并在原代碼進行一定的修改，發(fā)現(xiàn)可以滿足我的需求，這是非常不錯的??！這里再次感謝寫這篇文章的作者，因為真的幫到我了,哈哈哈，請原諒我是菜雞。

當然這個樹型控件還是存在一些缺陷,假如節(jié)點越來越多又或者節(jié)點上的文字寬度占的比例較大的話,會顯得比較丑陋,還是需要多加改進。