小程序 实现 树形菜单

原理很简单，就是通过小程序的组件 递归来实现

首先创建一个组件。

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.js

Component({ 
  properties: {
    listData: { 
      type: Array|Object, 
      value: {} 
    }, 
    step:{ 
      type: Number, 
      value: 1 
    }, 
  }, 

  data: { 
    isShowChildren: true, 
  },

  methods: {  
    toggleShowChildren = function(){ 
      this.setData({ isShowChildren:!this.data.isShowChildren }) 
    }, 
  }
   
})

treeList.json

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

然后在使用树形菜单的页面 引入组件

json 引用组件

{
  "usingComponents": {
    "treeList":"/components/treeList/treeList"
  }
}

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:[]
            }
        ],