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

概述

模仿服务号公众号的底部菜单，支持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.点击菜单的时候触发时间，让引用的页面接收到点击事件。

使用示例

1. 在页面的json文件中引用

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

2.在页面中使用组件

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

在js文件中定义监听方法

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

目录结构