小程序底部自定义tabBar

   一、最简单底部导航栏
   在 app.json 内配置(限制：菜单栏最多5个,样式、图片不好个性化设置)

 "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "/assets/tabBar/icon_component.png",
        "selectedIconPath": "/assets/tabBar/icon_component_HL.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/contact/index",
        "iconPath": "/assets/tabBar/icon_API.png",
        "selectedIconPath": "/assets/tabBar/icon_API_HL.png",
        "text": "联系客服"
      }
    ]
  }

二、自定义底部导航栏

1、在 app.json 内配置 (custom：最低适配版本2.5.0)

"tabBar": {
   "custom": true,    // 是否启用自定义底部导航栏
   ..........         // 省略部分代码同上app.json的配置,虽然配置后并不生效，但是不能省
},

"usingComponents": {  // 在 app.json 内开启全局配置
   "v-tabBar": "custom-tab-bar/index"
}

2、自定义 tabBar 组件   (文件夹名必须为custom-tab-bar，必须和pages在同一级目录；文件名必须为 index 命名)

custom-tab-bar 代码请参考：自定义 tabBar

3、在 pages 的 xxx.js 新增 onShow 方法

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

参考：微信小程序tabBar

          微信小程序自定义tabbar