Without further ado, let’s get into the code➡️
Component resource download (if you want to download the component directly, you can click to download)
Create a component named treeList
component code
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 }) }, } })
The component path is based on the actual situation
Pages that require the use of tree menus introduce components
Page code
json reference component
{
"usingComponents": {
"treeList":"/components/treeList/treeList"
},
"navigationBarTitleText": "标题"
}
Using components in wxml:
<view class="list">
<block wx:for="{
{listData}}" wx:key="index">
<treeList listData="{
{item}}" step="1" ></treeList>
</block>
</view>
The data format of listData is as follows:
listData:[
{
title:'A层级菜单1',
children:[
{
title:'B层级菜单1',
children:[],
isBind:true
},
{
title:'B层级菜单2',
children:[
{
title:'C层级菜单1',
children:[]
}
]
}
]
},
{
title:'A层级菜单2',
children:[]
}
],
Display of results
