微信小程序自定义底部导航菜单

1.小程序全局配置

"tabBar": {
        "custom": true,
        "backgroundColor": "#fff",
        "selectedColor": "#4CA6FE",
        "list": [
          ...... 
        ]
  },

首先要在app.json中设置tabBar的custom属性为true,开启自定义模式，其他的属性也要补齐，例如backgroundColor、selectedColor、list等

2.添加自定义组件

在代码根目录下添加组件目录

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

添加完成后，在该组件中自定义导航栏样式

3.需要注意的细节

1)每个tab页下自定义的tabBar组件实例是不同的，此时则需要自定义组件下的getTabBar接口，获取当前页面的自定义组件实例

if (typeof this.getTabBar === 'function' && this.getTabBar()) {
    this.getTabBar().setData({
      selected: 0
    })
}

在切换一级页面时，需要在当前页面的onShow或者onReady函数中，设置改变当前导航状态的数值

2)配置app.json全局参数时，tabBar需要添加使用的组件

"tabBar": {
    ...
    "usingComponents": {}
    ...
}

3)组件需要自我声明

//custom-tab-bar/index.json
{
  "component": true
}

4补充内容

1)在自定义导航切换的时候，图标在切换选中状态的时候会有闪动，这个体验其实不好

2)导航栏需要添加未读标记或未读消息数时，推荐使用小程序自带的API

wx.showTabBarRedDot()  //显示 tabBar 某一项的右上角的红点
wx.setTabBarBadge()  //为 tabBar 某一项的右上角添加文本

以上就是个人在工作用实际遇到的问题总结，如有错误还请大家指正，谢谢！