小程序实现无限级树形菜单
时间: 2023-09-01 14:11:15 浏览: 124
要实现无限级树形菜单,可以使用小程序的递归组件来实现。具体步骤如下:
1. 定义一个自定义组件,例如TreeMenu,用来显示树形菜单。
2. 在TreeMenu组件中,使用wx:for循环遍历传入的菜单数据,生成菜单项。
3. 对于每个菜单项,如果它有子菜单,就递归调用TreeMenu组件,将子菜单作为参数传入,生成子菜单。
4. 在TreeMenu组件中添加一个selected参数,用来标记当前选中的菜单项。
5. 在点击菜单项时,将该项设置为选中状态,并将其值传递给父组件,以便处理选中事件。
代码实现示例:
```xml
<!-- TreeMenu.wxml -->
<template name="TreeMenu">
<view>
<block wx:for="{{menuList}}">
<view class="menu-item {{selected == item.id ? 'active' : ''}}" bindtap="selectMenuItem" data-item="{{item}}">
{{item.text}}
</view>
<TreeMenu wx:if="{{item.children}}" menuList="{{item.children}}" selected="{{selected}}" bind:menuSelect="onMenuSelect"></TreeMenu>
</block>
</view>
</template>
```
```javascript
// TreeMenu.js
Component({
properties: {
menuList: {
type: Array,
value: []
},
selected: {
type: Number,
value: 0
}
},
methods: {
selectMenuItem: function(e) {
const item = e.currentTarget.dataset.item;
this.setData({
selected: item.id
});
this.triggerEvent('menuSelect', item);
},
onMenuSelect: function(e) {
const item = e.detail;
this.setData({
selected: item.id
});
this.triggerEvent('menuSelect', item);
}
}
})
```
使用示例:
```xml
<!-- index.wxml -->
<view>
<TreeMenu menuList="{{menuList}}" selected="{{selected}}" bind:menuSelect="onMenuSelect"></TreeMenu>
</view>
```
```javascript
// index.js
Page({
data: {
menuList: [
{
id: 1,
text: '菜单1',
children: [
{
id: 11,
text: '子菜单1-1',
children: [
{
id: 111,
text: '子菜单1-1-1'
},
{
id: 112,
text: '子菜单1-1-2'
}
]
},
{
id: 12,
text: '子菜单1-2'
}
]
},
{
id: 2,
text: '菜单2',
children: [
{
id: 21,
text: '子菜单2-1'
},
{
id: 22,
text: '子菜单2-2',
children: [
{
id: 221,
text: '子菜单2-2-1'
}
]
}
]
}
],
selected: 0
},
onMenuSelect: function(e) {
console.log('选中菜单项:', e);
}
})
```
以上代码示例可以实现一个无限级的树形菜单,并且支持选中事件的处理。