微信小程序实现双层嵌套菜单栏

activeMenuIndex: 0,
activeSubMenuIndex: 0

},
handleMenuClick(e) {
const { index } = e.currentTarget.dataset;
this.setData({
activeMenuIndex: index
});
},
handleSubMenuClick(e) {
const { index } = e.currentTarget.dataset;
this.setData({
activeSubMenuIndex: index
});
}
});

## 示例说明一：点击菜单项切换子菜单

在这个示例中，当用户点击第一层菜单栏的菜单项时，会切换显示对应的子菜单项。

示例代码：

```markdown
<view class=\"container\">
  <view class=\"menu-bar\">
    <view class=\"menu-item\" bindtap=\"handleMenuClick\" data-index=\"0\">菜单项1</view>
    <view class=\"menu-item\" bindtap=\"handleMenuClick\" data-index=\"1\">菜单项2</view>
    <view class=\"menu-item\" bindtap=\"handleMenuClick\" data-index=\"2\">菜单项3</view>
  </view>
  <view class=\"sub-menu-bar\">
    <view class=\"sub-menu-item\" wx:if=\"{{activeMenuIndex === 0}}\" bindtap=\"handleSubMenuClick\" data-index=\"0\">子菜单项1</view>
    <view class=\"sub-menu-item\" wx:if=\"{{activeMenuIndex === 1}}\" bindtap=\"handleSubMenuClick\" data-index=\"1\">子菜单项2</view>
    <view class=\"sub-menu-item\" wx:if=\"{{activeMenuIndex === 2}}\" bindtap=\"handleSubMenuClick\" data-index=\"2\">子菜单项3</view>
  </view>
</view>

示例说明二：同时显示多个子菜单

在这个示例中，当用户点击第一层菜单栏的菜单项时，会同时显示多个子菜单项。

示例代码：

<view class=\"container\">
  <view class=\"menu-bar\">
    <view class=\"menu-item\" bindtap=\"handleMenuClick\" data-index=\"0\">菜单项1</view>
    <view class=\"menu-item\" bindtap=\"handleMenuClick\" data-index=\"1\">菜单项2</view>
    <view class=\"menu-item\" bindtap=\"handleMenuClick\" data-index=\"2\">菜单项3</view>
  </view>
  <view class=\"sub-menu-bar\">
    <view class=\"sub-menu-item\" wx:if=\"{{activeMenuIndex === 0 || activeMenuIndex === 1}}\" bindtap=\"handleSubMenuClick\" data-index=\"0\">子菜单项1</view>
    <view class=\"sub-menu-item\" wx:if=\"{{activeMenuIndex === 0 || activeMenuIndex === 2}}\" bindtap=\"handleSubMenuClick\" data-index=\"1\">子菜单项2</view>
    <view class=\"sub-menu-item\" wx:if=\"{{activeMenuIndex === 1 || activeMenuIndex === 2}}\" bindtap=\"handleSubMenuClick\" data-index=\"2\">子菜单项3</view>
  </view>
</view>

以上就是实现微信小程序双层嵌套菜单栏的完整攻略，通过创建页面结构、设计样式和添加交互功能，可以实现一个功能完善的双层嵌套菜单栏。

阅读剩余 27%