仿微信公众号服务号底部菜单，二级菜单组件-小程序实现

本文链接：https://blog.youkuaiyun.com/hanjiepo/article/details/133028319

本文介绍了如何开发一个支持2级动态配置的微信公众号底部菜单组件，包括布局设计、蒙版监听和使用示例。开发者可以轻松在项目中集成这个功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

模仿服务号公众号的底部菜单，支持2级菜单动态配置

详细

概述

做一个类似微信公众号的底部菜单组件，支持2级菜单，可动态配置。

实现效果

实现思路

布局设计

    <!--pages/common/component/bottom_menu/bottom_menu.wxml-->
    <view class="menu_main" wx:if="{{menu.length > 0}}">
    <!-- 最外层，监听时间，触碰就关闭菜单 -->
      <view class="sub_menu_layer" wx:if="{{showSubMenu}}" 
        catchtouchmove="hideMenu" 
        bindtap="hideMenu">
    <!-- 弹出的二级菜单，位置动态计算 -->
        <view class="sub_menu_list" style="margin-left: {{menuIndex * (100/menu.length)}}vw;">
          <view class="sub_menu" wx:for="{{subMenu}}" wx:key="id"
           catchtap="menuClick" data-item="{{item}}">
            {{item.name}}
           </view>
        </view>
      </view>
    <!-- 底部一级菜单，如果有子菜单，就显示一个“三”的icon -->
      <view class="menu_item" wx:for="{{menu}}" wx:key="id" bindtap="menuClick" data-index="{{index}}" data-item="{{item}}">
        <view class="menu_text_wrap">
          <view class="menu_text {{item.disable ? 'disable':''}}">
            <image wx:if="{{item.sub}}" class="ic_menu" src="/img/ic_menu.png"></image>
            {{item.name}}
          </view>
        </view>
      </view>
    </view>

方法监听

1.监听点击外层完全透明的蒙版，有点击就把二级菜单关闭。
2.监听一街菜单，如果存在二级菜单，就弹出展示二级菜单（弹出的蒙版是完全透明的，模仿微信的效果）
3.点击菜单的时候触发时间，让引用的页面接收到点击事件。

使用示例

在页面的json文件中引用

    {
    "usingComponents": {
     "bottom_menu": "/component/bottom_menu/bottom_menu"
    }
    }

2.在页面中使用组件

    <bottom_menu
     menu="{{menu}}"
     bind:menuClick="menuClick"/>

在js文件中定义监听方法

    menuClick(e) {
     console.log(e.detail)
    }