[移动开发]微信小程序 实现 树形菜单其实很简单

话不多说，上代码 ??

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

创建一个名为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.js：

Component({ properties: { listData:{ type:Array|Object, value:{} }, step:{ type:Number, value:1 }, }, data: { isShowChildren:true, }, methods: { // 切换 显示子项 toggleShowChildren(){ this.setData({ isShowChildren:!this.data.isShowChildren }) }, } })

treeList.wxss：

.treeList { box-sizing: border-box; position: relative; font-size: 30rpx; margin: 20rpx 0; /* color: #555555; */ } .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" } }

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

页面代码

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

展示效果