快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)多層級(jí)復(fù)選框菜單

更新時(shí)間：2022年07月18日 14:39:32 作者：十三月tlz

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多層級(jí)復(fù)選框菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一、背景

因客戶(hù)需要，有一個(gè)功能是需要注冊(cè)用戶(hù)時(shí)選擇多個(gè)【單元 - 樓層 - 設(shè)備】的綁定，谷歌了一通，沒(méi)有找到想要的，無(wú)奈之舉只能手寫(xiě)一個(gè)…

二、效果展示

三、功能點(diǎn)

1、初始化時(shí)，默認(rèn)展開(kāi)選中的菜單
2、點(diǎn)擊每一層父級(jí)菜單，會(huì)自動(dòng)折疊其子菜單
3、選中子級(jí)節(jié)點(diǎn)會(huì)默認(rèn)選中父級(jí)節(jié)點(diǎn)
4、子級(jí)節(jié)點(diǎn)都沒(méi)選中默認(rèn)取消選中父級(jí)節(jié)點(diǎn)
5、選中父級(jí)節(jié)點(diǎn)默認(rèn)選中其所有子級(jí)節(jié)點(diǎn)

四、代碼實(shí)現(xiàn)

這里沒(méi)寫(xiě)組件，如果需要可以改為組件。
可能會(huì)有一個(gè)疑問(wèn)為哈是 treeMenu2 不是 treeMenu1
因?yàn)?treeMenu1 寫(xiě)的low，treeMenu2 升級(jí)了js代碼。

1、treeMenu2.js

js里面的各種事件均為遞歸操作，可根據(jù)加載的數(shù)據(jù)動(dòng)態(tài)進(jìn)行操作。

// pages/biz/treeMenu/treeMenu.js
Page({

? ? /**
? ? ?* 頁(yè)面的初始數(shù)據(jù)
? ? ?*/
? ? data: {
? ? ? ? menuTreeImgLeft: "../../../icon/f_left.png",
? ? ? ? menuTreeImgBottom: "../../../icon/f_bottom.png",
? ? ? ? menuTree: [{
? ? ? ? ? ? "checked": false,
? ? ? ? ? ? "children": [{
? ? ? ? ? ? ? ? "checked": false,
? ? ? ? ? ? ? ? "children": [{
? ? ? ? ? ? ? ? ? ? "id": "1-1-1",
? ? ? ? ? ? ? ? ? ? "checked": true,
? ? ? ? ? ? ? ? ? ? "field": "1",
? ? ? ? ? ? ? ? ? ? "title": "設(shè)備1",
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? "id": "1-1-2",
? ? ? ? ? ? ? ? ? ? "checked": false,
? ? ? ? ? ? ? ? ? ? "field": "2",
? ? ? ? ? ? ? ? ? ? "title": "設(shè)備2"
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? "id": "1-1",
? ? ? ? ? ? ? ? "field": "1-floor",
? ? ? ? ? ? ? ? "title": "1樓",
? ? ? ? ? ? ? ? "isHidden": true,
? ? ? ? ? ? ? ? "bindAll": false,
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? "checked": false,
? ? ? ? ? ? ? ? "children": [{
? ? ? ? ? ? ? ? ? ? "checked": false,
? ? ? ? ? ? ? ? ? ? "field": "3",
? ? ? ? ? ? ? ? ? ? "title": "設(shè)備3"
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? "id": "1-2",
? ? ? ? ? ? ? ? "field": "2-floor",
? ? ? ? ? ? ? ? "title": "2樓",
? ? ? ? ? ? ? ? "isHidden": true,
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? "checked": false,
? ? ? ? ? ? ? ? "children": [{
? ? ? ? ? ? ? ? ? ? "id": "1-3-4",
? ? ? ? ? ? ? ? ? ? "checked": true,
? ? ? ? ? ? ? ? ? ? "field": "4",
? ? ? ? ? ? ? ? ? ? "title": "設(shè)備4"
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? "id": "1-3",
? ? ? ? ? ? ? ? "field": "3-floor",
? ? ? ? ? ? ? ? "title": "3樓",
? ? ? ? ? ? ? ? "isHidden": true,
? ? ? ? ? ? }],
? ? ? ? ? ? "id": "1",
? ? ? ? ? ? "isHidden": true,
? ? ? ? ? ? "bindAll": false,
? ? ? ? ? ? "field": "1-unit",
? ? ? ? ? ? "title": "1單元"
? ? ? ? }, {
? ? ? ? ? ? "checked": false,
? ? ? ? ? ? "children": [{
? ? ? ? ? ? ? ? "checked": false,
? ? ? ? ? ? ? ? "children": [{
? ? ? ? ? ? ? ? ? ? "id": "2-1-1",
? ? ? ? ? ? ? ? ? ? "checked": false,
? ? ? ? ? ? ? ? ? ? "field": "5",
? ? ? ? ? ? ? ? ? ? "title": "設(shè)備5"
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? "id": "2-1",
? ? ? ? ? ? ? ? "field": "1-floor",
? ? ? ? ? ? ? ? "title": "1樓",
? ? ? ? ? ? ? ? "isHidden": true,
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? "checked": false,
? ? ? ? ? ? ? ? "children": [{
? ? ? ? ? ? ? ? ? ? "id": "2-2-1",
? ? ? ? ? ? ? ? ? ? "checked": false,
? ? ? ? ? ? ? ? ? ? "field": "6",
? ? ? ? ? ? ? ? ? ? "title": "設(shè)備6"
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? "id": "2-2",
? ? ? ? ? ? ? ? "field": "2-floor",
? ? ? ? ? ? ? ? "title": "2樓",
? ? ? ? ? ? ? ? "isHidden": true,
? ? ? ? ? ? }],
? ? ? ? ? ? "bindAll": false,
? ? ? ? ? ? "isHidden": true,
? ? ? ? ? ? "field": "2-unit",
? ? ? ? ? ? "title": "2單元",
? ? ? ? ? ? "id": "2",
? ? ? ? }],
? ? ? ? deepList: [],
? ? ? ? deepListOne: []
? ? },
? ? /**
? ? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
? ? ?*/
? ? onShow: function () {
? ? ? ? this.checkForChecked()
? ? },

? ? /**
? ? ?* 默認(rèn)選中是否展開(kāi)
? ? ?*/
? ? checkForChecked() {
? ? ? ? var data = this.data.menuTree

? ? ? ? // 獲取所有被選中的節(jié)點(diǎn)
? ? ? ? var checkedNodes = this.getDeep(data)
? ? ? ? // 獲取所有選中節(jié)點(diǎn)的父節(jié)點(diǎn)
? ? ? ? checkedNodes.forEach(element => {
? ? ? ? ? ? var tmp = this.getParentsById(data, element.id)
? ? ? ? ? ? if (tmp != undefined && tmp.length > 0) {
? ? ? ? ? ? ? ? // 最后一級(jí)選中，默認(rèn)展開(kāi)和選中父級(jí)菜單
? ? ? ? ? ? ? ? tmp.forEach(element => {
? ? ? ? ? ? ? ? ? ? element.isHidden = false
? ? ? ? ? ? ? ? ? ? element.checked = true
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? })

? ? ? ? this.setData({
? ? ? ? ? ? menuTree: data
? ? ? ? })
? ? },
? ? // 遞歸 - 根據(jù)id獲取所有父節(jié)點(diǎn)
? ? getParentsById(list, id) {
? ? ? ? for (let i in list) {
? ? ? ? ? ? if (list[i].id == id) {
? ? ? ? ? ? ? ? return [list[i]]
? ? ? ? ? ? }
? ? ? ? ? ? if (list[i].children) {
? ? ? ? ? ? ? ? let node = this.getParentsById(list[i].children, id);
? ? ? ? ? ? ? ? if (node !== undefined) {
? ? ? ? ? ? ? ? ? ? return node.concat(list[i])
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? },
? ? // 遞歸 - 根據(jù)id獲取當(dāng)前節(jié)點(diǎn)對(duì)象
? ? getNodeById(data, id, newNodes = []) {
? ? ? ? data.forEach(element => {
? ? ? ? ? ? // 匹配到節(jié)點(diǎn)
? ? ? ? ? ? if (element.id === id) {
? ? ? ? ? ? ? ? newNodes.push(element)
? ? ? ? ? ? }
? ? ? ? ? ? if (element.children) {
? ? ? ? ? ? ? ? this.getNodeById(element.children, id, newNodes)
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? return newNodes;
? ? },

? ? // 遞歸 - 根據(jù)id獲取所有子節(jié)點(diǎn)，（其實(shí)就是先獲取當(dāng)前id的節(jié)點(diǎn)對(duì)象，然后取當(dāng)前對(duì)象,注意這里返回的是數(shù)組）
? ? getChildrenById(data, id, newNodes = []) {
? ? ? ? var list = data.children
? ? ? ? if (list != undefined) {
? ? ? ? ? ? list.forEach(element => {
? ? ? ? ? ? ? ? newNodes.push(element)
? ? ? ? ? ? ? ? if (element.children) {
? ? ? ? ? ? ? ? ? ? this.getChildrenById(element, id, newNodes)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? }
? ? ? ? return newNodes;
? ? },

? ? // 遞歸 - 獲取所有選中節(jié)點(diǎn)
? ? getDeep(data, newCheckedNodes = []) {
? ? ? ? data.forEach(element => {
? ? ? ? ? ? if (element.checked) {
? ? ? ? ? ? ? ? newCheckedNodes.push(element)
? ? ? ? ? ? }
? ? ? ? ? ? if (element.children) {
? ? ? ? ? ? ? ? this.getDeep(element.children, newCheckedNodes)
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? return newCheckedNodes
? ? },

? ? // 遞歸 - 根據(jù)節(jié)點(diǎn)id獲取兄弟所有節(jié)點(diǎn)
? ? getBrotherNodesById(list, id) {
? ? ? ? // 非頂級(jí)節(jié)點(diǎn)：獲取節(jié)點(diǎn)父節(jié)點(diǎn)對(duì)象里的children
? ? ? ? var parentNodes = this.getParentsById(list, id)
? ? ? ? if (parentNodes && parentNodes.length >= 2) {
? ? ? ? ? ? return parentNodes[1].children
? ? ? ? }
? ? ? ? // 頂級(jí)節(jié)點(diǎn)：第一級(jí)是自己，從原始數(shù)組中遍歷第一層即可
? ? ? ? return list

? ? },

? ? // 根據(jù)當(dāng)前節(jié)點(diǎn)id，獲取及所有的父級(jí)兄弟節(jié)點(diǎn)的所有父節(jié)點(diǎn)
? ? getParentBrotherAllNodesById(list, id) {
? ? ? ? var result = []
? ? ? ? // 1、獲取當(dāng)前節(jié)點(diǎn)id父節(jié)點(diǎn)的父節(jié)點(diǎn)
? ? ? ? var parentNodes = this.getParentsById(list, id)

? ? ? ? // 小于3表示當(dāng)前父節(jié)點(diǎn)是頂級(jí)節(jié)點(diǎn)
? ? ? ? if (parentNodes.length < 3) {
? ? ? ? ? ? return parentNodes[parentNodes.length - 1]
? ? ? ? }
? ? ? ? var testNode = parentNodes[2];
? ? ? ? // 2、獲取父節(jié)點(diǎn)的父節(jié)點(diǎn)所有兄弟節(jié)點(diǎn)
? ? ? ? var children = testNode.children
? ? ? ? children.forEach(element => {
? ? ? ? ? ? var parentNodesById = this.getParentsById(list, element.id)
? ? ? ? ? ? if (parentNodesById.length >= 2) {
? ? ? ? ? ? ? ? // js 數(shù)組中添加多個(gè)元素 簡(jiǎn)單的方法 push(...[])
? ? ? ? ? ? ? ? result.push(...(parentNodesById.slice(0, parentNodesById.length - 1)))
? ? ? ? ? ? }
? ? ? ? });
? ? ? ? return result;
? ? },

? ? /**
? ? ?* 點(diǎn)擊事件 - 左側(cè)綁定復(fù)選框事件
? ? ?*/
? ? checkboxChangeBindAll(e) {
? ? ? ? var index = e.currentTarget.dataset.index;
? ? ? ? var index2 = e.currentTarget.dataset.index2;
? ? ? ? var list = this.data.menuTree
? ? ? ? if (index2 == undefined) {
? ? ? ? ? ? list[index].bindAll = !list[index].bindAll
? ? ? ? }
? ? ? ? if (index2 != undefined) {
? ? ? ? ? ? list[index].children[index2].bindAll = !list[index].children[index2].bindAll
? ? ? ? }

? ? ? ? console.log(this.data.menuTree);
? ? },
? ? checkboxChange(e) {
? ? ? ? // console.log(e);
? ? ? ? console.log('checkbox發(fā)生change事件，攜帶value值為：', e.detail.value)
? ? ? ? const values = e.detail.value
? ? },


? ? /**
? ? ?* 點(diǎn)擊事件 - 右側(cè)復(fù)選框事件
? ? ?*/
? ? checkboxChangeAll(e) {
? ? ? ? var id = e.currentTarget.dataset.id;
? ? ? ? var data = this.data.menuTree
? ? ? ? var node = this.getNodeById(data, id)
? ? ? ? var childrenNodes = this.getChildrenById(node[0], id)

? ? ? ? // 1、子節(jié)點(diǎn)點(diǎn)選中狀態(tài)-跟隨父節(jié)點(diǎn)移動(dòng)
? ? ? ? node[0].checked = !node[0].checked
? ? ? ? // 節(jié)點(diǎn)下面的所有子節(jié)點(diǎn)跟隨父節(jié)點(diǎn)的選中狀態(tài)
? ? ? ? childrenNodes.forEach(element => {
? ? ? ? ? ? element.checked = node[0].checked
? ? ? ? })

? ? ? ? // 2、父節(jié)點(diǎn)選中狀態(tài),子節(jié)點(diǎn)都沒(méi)選中，父節(jié)點(diǎn)默認(rèn)不選中，子節(jié)點(diǎn)有一個(gè)選中，父節(jié)點(diǎn)也選中
? ? ? ? // 獲取同級(jí)兄弟節(jié)點(diǎn)
? ? ? ? var bortherNodes = this.getBrotherNodesById(data, id)

? ? ? ? // 3、同級(jí)都選中
? ? ? ? var allChecked = false
? ? ? ? bortherNodes.forEach(element => {
? ? ? ? ? ? if (element.checked) {
? ? ? ? ? ? ? ? allChecked = true
? ? ? ? ? ? }
? ? ? ? })

? ? ? ? // 獲取節(jié)點(diǎn)id所有父節(jié)點(diǎn)
? ? ? ? var parentNodes = this.getParentsById(data, id)
? ? ? ? if (parentNodes.length > 1) {
? ? ? ? ? ? if (allChecked) {
? ? ? ? ? ? ? ? // 下標(biāo)index=0的節(jié)點(diǎn)是其本身，這里跳過(guò)
? ? ? ? ? ? ? ? for (let index = 1; index < parentNodes.length; index++) {
? ? ? ? ? ? ? ? ? ? const element = parentNodes[index];
? ? ? ? ? ? ? ? ? ? element.checked = true
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? parentNodes[1].checked =false
? ? ? ? ? ? }
? ? ? ? }

? ? ? ? // 4、同級(jí)都未選中
? ? ? ? if (!allChecked) {
? ? ? ? ? ? var allNoChecked = false
? ? ? ? ? ? // ?根據(jù)當(dāng)前節(jié)點(diǎn)id，獲取除去頂級(jí)節(jié)點(diǎn)的所有的父級(jí)兄弟節(jié)點(diǎn)的所有父節(jié)點(diǎn)
? ? ? ? ? ? var parentBother = this.getParentBrotherAllNodesById(data, id)
? ? ? ? ? ? console.log(parentBother);
? ? ? ? ? ? if (parentBother.length > 1) {
? ? ? ? ? ? ? ? parentBother.forEach(element => {
? ? ? ? ? ? ? ? ? ? if (element.checked) {
? ? ? ? ? ? ? ? ? ? ? ? allNoChecked = true
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? ? ? console.log(allNoChecked);
? ? ? ? ? ? // console.log(parentBother);
? ? ? ? ? ? if(!allNoChecked){
? ? ? ? ? ? ? ? parentNodes.forEach(element => {
? ? ? ? ? ? ? ? ? ? element.checked=false
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? }


? ? ? ? this.setData({
? ? ? ? ? ? menuTree: data
? ? ? ? })
? ? ? ? // console.log(this.data.menuTree);
? ? },
? ? /**
? ? ?* 點(diǎn)擊事件 - 點(diǎn)擊層級(jí)顯示和折疊事件
? ? ?*/
? ? openAndHide(e) {
? ? ? ? var id = e.currentTarget.dataset.id;
? ? ? ? var list = this.data.menuTree

? ? ? ? console.log(id);
? ? ? ? // 根據(jù) id 獲取選中節(jié)點(diǎn)的對(duì)象
? ? ? ? var node = this.getNodeById(list, id)
? ? ? ? // 根據(jù) id 獲取選中節(jié)點(diǎn)下的所有子節(jié)點(diǎn)
? ? ? ? var res = this.getChildrenById(node[0], id)
? ? ? ? // 包含當(dāng)前id節(jié)點(diǎn)本身
? ? ? ? res.push(node[0])

? ? ? ? // 遍歷選中節(jié)點(diǎn)（及自己）是否展開(kāi)
? ? ? ? res.forEach(element => {
? ? ? ? ? ? element.isHidden = !element.isHidden
? ? ? ? })

? ? ? ? this.setData({
? ? ? ? ? ? menuTree: list
? ? ? ? })

? ? }
})

2、treeMenu2.JSON

{
? "usingComponents": {}
}

3、treeMenu2.WXMl

這里其實(shí)寫(xiě)的有問(wèn)題，我主要寫(xiě)java的，前端用的不多，哪個(gè)高手指點(diǎn)一下，wxml 文件怎么樣能遞歸呢，
我這里直接最笨的方法，三層for…，

<view class="divcss5-max">
? <view class="page-section ">
? ? <view style="padding-bottom:10px">設(shè)備選擇列表：{{menuTree.length}}</view>
? ? <view class="weui-cells weui-cells_after-title "></view>
? ? <view>
? ? ? <!-- 第一層 -->
? ? ? ? <block class="weui-cell weui-check__label line-center" wx:for="{{menuTree}}" wx:for-index="index"
? ? ? ? ? wx:for-item="item" wx:key="id">
? ? ? ? ? <view class="paddingBottom_10 "></view>
? ? ? ? ? <view class="paddingLeft_10">
? ? ? ? ? <view class="treeMenuCenter">
? ? ? ? ? ? <checkbox-group bindchange="checkboxChangeAll" data-index="{{index}}" data-id="{{item.id}}" >
? ? ? ? ? ? ? <checkbox value="{{item.field}}" ?checked="{{item.checked}}" />
? ? ? ? ? ? ? </checkbox-group>
? ? ? ? ? ? <!-- 箭頭圖標(biāo) -->
? ? ? ? ? ? <view class="treeMenuCenter" ?bindtap="openAndHide" data-id="{{item.id}}" data-index="{{index}}" ?>
? ? ? ? ? ? <image wx:if="{{item.isHidden == true}}" ?class="icon-chioce" src="{{menuTreeImgLeft}}"></image>
? ? ? ? ? ? <image wx:if="{{item.isHidden == false}}" ?class="icon-chioce" src="{{menuTreeImgBottom}}"></image>
? ? ? ? ? ? <text style="color:black"?
? ? ? ? ? ? ? decode="{{true}}">&nbsp;{{item.title}} &nbsp;</text>
? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? <!-- <checkbox-group bindchange="checkboxChangeBindAll" data-index="{{index}}" ?>
? ? ? ? ? ? ? <checkbox ?checked="{{item.bindAll}}" ? />綁定單元
? ? ? ? ? ? ? </checkbox-group> -->
? ? ? ? ? </view>
? ? ? ? ? ?
? ? ? ? ? </view>
? ? ? ? ? <!-- 第二層 -->
? ? ? ? ? <view class="" hidden="{{item.isHidden}}" wx:for="{{item.children}}" wx:for-index="index2" wx:for-item="item2"
? ? ? ? ? ? wx:key="id">
? ? ? ? ? ? <view class="paddingLeft_20 ">
? ? ? ? ? ? <view class="treeMenuCenter">
? ? ? ? ? ? <!-- <view class="dashedStyleWidth_40"></view> -->
? ? ? ? ? ? <checkbox-group bindchange="checkboxChangeAll" data-id="{{item2.id}}" data-index="{{index}}" data-index2="{{index2}}" >
? ? ? ? ? ? <checkbox value="{{item2.field}}" checked="{{item2.checked}}" />
? ? ? ? ? ? </checkbox-group>
? ? ? ? ? ? ? <!-- 箭頭圖標(biāo) -->
? ? ? ? ? ? ? <view class="treeMenuCenter" ?bindtap="openAndHide" ?data-id="{{item2.id}}"
? ? ? ? ? ? ? ?data-index="{{index}}" data-index2="{{index2}}" >
? ? ? ? ? ? ? <image wx:if="{{item2.isHidden == true}}" class="icon-chioce" src="{{menuTreeImgLeft}}"></image>
? ? ? ? ? ? ? <image wx:if="{{item2.isHidden == false}}" ? class="icon-chioce" src="{{menuTreeImgBottom}}"></image>
? ? ? ? ? ? ? <text style="color:#0094aa" ? ?decode="{{true}}">&nbsp; {{item2.title}}&nbsp; &nbsp;</text>
? ? ? ? ? ? </view>
? ? ? ? ? ? ? <!-- <checkbox-group bindchange="checkboxChangeBindAll" data-index="{{index}}" data-index2="{{index2}}" >
? ? ? ? ? ? ? <checkbox ?checked="{{item2.bindAll}}" ?/>綁定樓層
? ? ? ? ? ? ? </checkbox-group> -->
? ? ? ? ? ? </view>
? ? ? ? ? ? ??
? ? ? ? ? ? </view>
? ? ? ? ? ? <!-- 第三層 -->
? ? ? ? ? ? <block class="" wx:for="{{item2.children}}" wx:for-item="item3" ?wx:for-index="index3" wx:key="id">
? ? ? ? ? ? ? <view class="paddingLeft_30 " hidden="{{item2.isHidden}}">
? ? ? ? ? ? ? ? <!-- <view class="dashedStyleWidth_80"></view> -->
? ? ? ? ? ? ? ? <checkbox-group bindchange="checkboxChangeAll" data-id="{{item3.id}}"
? ? ? ? ? ? ? ? ?data-index="{{index}}" data-index2="{{index2}}" ?data-index3="{{index3}}" >
? ? ? ? ? ? ? ? <checkbox value="{{item3.field}}" checked="{{item3.checked}}" />
? ? ? ? ? ? ? ? {{item3.title}}
? ? ? ? ? ? ? </checkbox-group>
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? </view>
? ? ? ? ? ? </block>
? ? ? ? ? </view>
? ? ? ? ? <view class="paddingBottom_10 "></view>
? ? ? ? ? <view class="weui-cells weui-cells_after-title "></view>
? ? ? ? </block>
? ? </view>
? </view>
</view>

4、treeMenu2.WXSS

/* pages/biz/treeMenu/treeMenu.wxss */
@import '../../../lib/weui.wxss';

.empty{
? padding: 5px 0px;
}
.paddingLeft_10{
? padding-left: 10px;
? padding-bottom: 5px;
}

.paddingLeft_20{
? padding-left: 40px;
? padding-bottom: 5px;
}

.paddingLeft_30{
? padding-left: 80px;
? padding-bottom: 5px;
}

.paddingBottom_10{
? padding-top: 10px;
}
.line-center{
? display: flex;
? align-items: center;
? justify-content: center;
? flex-flow: column;
}
/**
*參考：https://cloud.tencent.com/developer/article/1690869
*
/
/* 選中后的 背景樣式 （紅色背景 無(wú)邊框 可根據(jù)UI需求自己修改） */ ?
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
? background: #0094aa;
}
/* 選中后的 對(duì)勾樣式 （白色對(duì)勾 可根據(jù)UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
? color:#fff; /* 對(duì)勾顏色 白色 */
}

.treeMenuCenter{
? display: flex;
? align-items: center;
}

.dashedStyleWidth_80{
? margin-left: 10px;
? margin-right: 5px;
? width: 80px;
? height: 0px;
? border: 0.5px dotted gray;
}

.dashedStyleWidth_40{
? margin-left: 10px;
? margin-right: 5px;
? width: 40px;
? height: 0px;
? border: 0.5px dotted gray;
}

? ?
.icon-chioce {
? height: 15px;
? width: 15px;
? padding-top: 10px;
? padding-bottom: 10px;
? background-color: fff;
?}