目录

一、技术概述

微信小程序自定义导航栏技术用于创建个性化的页面导航，以适应不同的业务需求和品牌形象。它在需要超越微信默认导航栏限制时使用，学习该技术可以提升用户体验和界面一致性。技术难点在于适配不同机型和确保导航栏与胶囊按钮对齐。

二、技术详述

2.1 配置app.json

设置"window"对象中的"navigationStyle"为"custom"，以启用自定义导航栏。

"window": {
    "navigationStyle": "custom",
  },

2.2 创建自定义导航栏组件

在components目录下创建导航栏组件 custom_tab_bar，编写custom_tab_bar.json、custom_tab_bar.wxml、custom_tab_bar.wxss和custom_tab_bar.js文件。
custom_tab_bar.json

{
  "component": true
}

custom_tab_bar.wxml

<!--miniprogram/custom-tab-bar/index.wxml-->
<view class="tabbar flex-row">
  <!-- 中间的加号 -->
  <image src="/images/tab_add.png" mode="aspectFill" class="tabbar-item-icon2" bindtap="addPost"/>
  <!-- 两边四个图标 -->
  <view wx:for="{{list}}" wx:key="index" class="tabbar-item {{index===1 ? 'left' : index===2 ? 'right' : 'side'}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <image src="{{selected===index ? item.selectedIconPath : item.iconPath}}" mode="aspectFill" class="tabbar-item-icon1" />
  </view>
  <!-- 副菜单栏 -->
  <!--进行副菜单栏的-->
</view>

2.3 样式设计

在navigationBar.wxss中定义导航栏的样式，包括高度、背景色、字体等。根据具体要求进行编程，此处省略。

2.4 逻辑实现

在navigationBar.js中编写逻辑，如跳转事件处理和状态管理。
custom_tab_bar.js
由于不好分割以及说明，我将大部分的代码放上来

Component({
  data: {
    selected: 0,
    showAdd: false,
    showAddSearch: false,
    list: [
      {
        "pagePath": "/pages/path1/path1",
        "iconPath": "/images/icon1.png",
        "selectedIconPath": "/images/icon1_on.png"
      },
     ......
      {
        "pagePath": "/pages/pathn/pathn",
        "iconPath": "/images/iconn.png",
        "selectedIconPath": "/images/iconn_on.png"
      }
    ]
  },
  attached() {
    const app = getApp();
    app.globalData.tabBars.push(this);
  }, 
  methods: {
    switchTab(e) {
      // 获取当前点击的tab的索引
      const index = e.currentTarget.dataset.index;
      if( index===1 ){
        // 按钮
        this.setData({
          showAdd: false,
          showAddSearch: !this.data.showAddSearch
        })
        // 设置 index
        const app = getApp();
        app.globalData.tabBars.forEach(tabBar => {
          tabBar.setData({
            selected: 1
          });
        });
      } else {    
        // 其他按钮
        this.setData({
          showAdd: false,
          showAddSearch: false
        })
        const data = e.currentTarget.dataset;
        const url = data.path;
        wx.switchTab({ url });
        const app = getApp();
        app.globalData.tabBars.forEach(tabBar => {
          tabBar.setData({
            selected: data.index
          });
        });
      }
    },
    // 中间按钮
    addPost: function () {
      this.setData({
        showAdd: !this.data.showAdd,
        showAddSearch: false
      })
    },
    /**
     * 副菜单栏的跳转
     */
  }
})

2.5 页面引用

在需要使用自定义导航栏的页面的js文件中引入该组件，并设置页面索引。
page.js

Page({
    onShow() {
      // 自定义tabbar
      console.log("index--onShow");
      const app = getApp();
      app.globalData.tabBars.forEach(tabBar => {
          tabBar.setData({
              selected: 3 // 根据需要设置为当前页面的索引
          });
      });
    },
});

2.6 流程图

技术使用中遇到的问题和解决过程

问题1

描述： 一开始对于点击中间加号按钮出现副菜单栏有点束手无策。
解决： addPost方法用于处理中间加号按钮的点击事件。当点击加号按钮时，切换showAdd的状态，从而显示或隐藏副菜单栏。同时，确保showAddSearch状态为false，以避免与搜索相关的副菜单同时显示。定义了navigateToNewCuisine和navigateToNewRecipe方法来处理副菜单栏中“新建菜谱”和“新建食谱”的导航逻辑，其都用到wx.navigateTo方法。点击这些选项时，会跳转到相应的页面，并关闭副菜单栏。

问题2

描述： 跳转页面之后，页面下标会跳回0
解决： 使用globalData全局变量来存储标签页组件实例。在switchTab方法中，根据点击的标签页索引更新了全局变量中每个标签页的selected状态。

参考文献、参考博客（标题、作者、链接）。

【微信小程序】page.json配置-自定义导航栏
为什么custom-tab-bar自定义后switchTab页面不加载OnLoad函数？
微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能