话不多说，上代码 ➡️
组件 资源下载（想直接下载组件，可以点击下载）
创建一个名为 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:[]
}
],
展示效果
