微信小程序 实现 树形菜单其实很简单

话不多说，上代码 ➡️

组件 资源下载（想直接下载组件，可以点击下载）

创建一个名为 treeList 的组件

组件代码

treeList.wxml：

<view class="treeList c{{step}}">
    <view class="line" style="margin-left:{{(step-1)*40}}px;"></view>
    <view class="title" style="margin-left:{{(step-1)*40}}px;">
        <view class="icon" wx:if="{{listData.children.length>0 && isShowChildren}}" catchtap="toggleShowChildren">-
        </view>
        <view class="icon" wx:elif="{{listData.children.length<=0}}">
            <view class="dot"></view>
        </view>
        <view class="icon" wx:else catchtap="toggleShowChildren">+</view>
        <view class="text" >{{listData.title}}</view>
    </view>
    <block wx:if="{{listData.children.length>0&&isShowChildren}}" wx:for="{{listData.children}}" wx:key="index">
        <treeList listData="{{item}}" step="{{step+1}}"
            bindtreeListEvent="treeListEvent"></treeList>
    </block>
</view>

treeList.wxss：

.treeList {
	box-sizing: border-box;
	position: relative;
	font-size: 30rpx;
	margin: 20rpx 0;
}
.line {
	position: absolute;
	height: calc(100% - 30rpx) ;
	width: 0px;
	border-left: 2rpx dashed #999999;
	left: 20rpx;
	top: 46rpx;
}
treeList:last-of-type>.treeList>.line {
	display: none;
}
.title {
	display: flex;
	align-items: center;
}
.title .icon {
	height: 38rpx;
	width: 38rpx;
	line-height: 38rpx;
	text-align: center;
	margin-right: 10rpx;
	border: 2rpx solid #cccccc;
	color: #cccccc;
}
.title .icon .dot {
	width: 20rpx;
	height: 20rpx;
	background: #f0f0f0;
	margin: 9rpx 0 0 9rpx;
	border-radius: 50%;
}
.title text {
	margin-right: 6rpx;
}
.title text.iconfont {
	font-size: 42rpx;
}
.title text.icon-tianjia {
	margin-left: 6rpx;
	font-size: 36rpx;
}
.title .btn {
	padding: 8rpx 20rpx;
	border: 2rpx solid #555555;
	color: #555555;
	font-size: 24rpx;
	margin-left: 4rpx;
	border-radius: 8rpx;
}
.title .text {
	padding: 6rpx 10rpx;
	border-radius: 10rpx;
	text-align: center;
	box-sizing: border-box;
}

treeList.json：

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

treeList.js：

Component({ properties: { listData:{ type:Array|Object, value:{} }, step:{ type:Number, value:1 }, }, data: { isShowChildren:true, }, methods: {  toggleShowChildren(){ this.setData({ isShowChildren:!this.data.isShowChildren }) }, } })

组件路径根据实际情况

需要使用树形菜单的页面 引入组件

页面代码

json 引用组件

{
  "usingComponents": {
    "treeList":"/components/treeList/treeList"
  },
  "navigationBarTitleText": "标题"
}

wxml中使用组件：

<view class="list">
        <block wx:for="{{listData}}" wx:key="index">
            <treeList listData="{{item}}" step="1" ></treeList>
        </block>
</view>

listData的数据格式如下：

listData:[
            {
                title:'A层级菜单1',
                children:[
                    {
                        title:'B层级菜单1',
                        children:[],
                        isBind:true
                    },
                    {
                        title:'B层级菜单2',
                        children:[
                            {
                                title:'C层级菜单1',
                                children:[]
                            }
                        ]
                    }
                ]
            },
            {
                title:'A层级菜单2',
                children:[]
            }
        ],

展示效果