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

立即下载用AI写一个

发布时间：2021-03-15

36人 | 浏览：3497次 | 收藏 |

技术：微信小程序+菜单+底部菜单+微信菜单

运行环境：微信客户端+微信开发者工具

概述

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

详细

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

# 实现效果
![](/contentImages/image/20210308/WGBAa0giXunJ2xqBUNI.gif)

# 实现思路
## 布局设计
```

<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>

  <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"/>
```
3. 在js文件中定义监听方法
```
menuClick(e) {
    console.log(e.detail)
  }
```

# 目录结构
![](/contentImages/image/20210308/S7Qw3YwZ06XB9XLkEVS.jpg)

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

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

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子