微信小程序 - 自定义底部菜单栏

        微信小程序底部菜单栏是可以通过自定义来实现的。主要涉及：新建组件、编写组件代码、设置样式、配置导航栏、在页面中引用。自定义底部导航栏可以创建出符合项目设计需求效果，实现个性化的页面切换功能。

        如下图效果，为比较常见的中间突出半圆效果的扫码或拍照的功能键，这个是可以通过CSS进行绘制出来的。此篇，将通过案例讲解这个导航栏如何实现。

        此案例中实现功能，与之前一篇实现顶部导航栏的方式雷同，有兴趣朋友可以去了解下，地址：微信小程序 - 自定义头部导航栏开发-优快云博客

一、配置导航栏

        在app.json文件中配置navigationStyle为custom，代码如下：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/mine/index"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationStyle": "custom"
  },
  "style": "v2"
}

二、新建组件

        在项目components目录中，创建Navigation底部导航栏组件，如下图：

        然后在app.json中，将其配置为全局组件，代码如下：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/mine/index"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationStyle": "custom"
  },
  "usingComponents": {
    "custom-header": "./components/Header/index",
    "custom-navigation": "./components/Navigation/index"
  },
  "style": "v2"
}

        然后页面中就可以直接使用custom-navigation引用了，代码如下：

<custom-navigation></custom-navigation>

三、绘制背景效果

        在页面中引入后，则可以进行编写菜单栏组件代码了，首先绘制出背景框。

index.wxml代码如下：

<!--components/Navigation/index.wxml-->
<view class="navigation-wrap">
  <view class="navigation-empty-wrap">
    <view class="empty-box"></view>
    <view class="bottom-safet-area" style="height: {
  {emptyHeight}}rpx;"></view>
  </view>
  <view class="fixed-nav-wrap">
    <view class="shadow-box">
      <view class