最近在做小程序的項目，由于用戶需求在進入頁面時進行選則角色，然后再進入小程序，這時看到的底部菜單看到的不一樣，而我們都知道原生的tabBar是不支持這種做法的。在網上搜集了海量資料后發現無非兩種解決方法：1.是建立模板,可是會有不能忍受的抖動；2.是利用小程序的組件開發；但是項目已經進行了一般，不可能再進行大的改變；

怎么辦呢？？

無意在一條評論中發現說微信官方已經提供該組件，于是在小程序文檔中尋找很久才在一個犄角旮旯找到：地址鏈接、

先看效果圖：

1.首先看一下官方用法

這是幾個非常重要你需要知道的

2.小程序提供了一個例子

在這個例子中有一個微信官方提供的組件：下載地址

組件的目錄結構：

3.就是我們要根據需求改造

自己改造的目錄結構如下：

1.首先配置app.json

"tabBar": { "custom": true,//這個要有， 前面都提到過，注釋要刪了 "color": "#7A7E83", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [  {   "pagePath": "pages/index1/index1",   "iconPath": "/image/home.png",   "selectedIconPath": "/image/home1.png",   "text": "首頁1"  },  {   "pagePath": "pages/mine1/mine1",   "iconPath": "/image/user.png",   "selectedIconPath": "/image/user1.png",   "text": "我的1"  },  {   "pagePath": "pages/index2/index2",   "iconPath": "/image/home.png",   "selectedIconPath": "/image/home1.png",   "text": "首頁2"  },  {   "pagePath": "pages/mine2/mine2",   "iconPath": "/image/user.png",   "selectedIconPath": "/image/user1.png",   "text": "我的2"  } ]},//這個"usingComponents": {}

2.app.js

//app.jsApp({ onLaunch: function () { }, globalData: {  userInfo: null,  list:[] //存放tabBar的數據 }})

3.改造組件

custom-tab-bar/index.jsconst app =getApp();Component({ data: {  selected: 0,  color: "#7A7E83",  selectedColor: "#ff6700",  list: [] //tabBar的數據 }, lifetimes: {  //組件的生命周期函數  attached() {   this.setData({    list: app.globalData.list   })  }, }, methods: {  switchTab(e) {   const data = e.currentTarget.dataset   const url = data.path   wx.switchTab({url})   this.setData({    selected: data.index   })  } }})

4.下面就是用了

在首頁index.wxml定義了兩個按鈕

<button bindtap='tab1'>進入tab1</button><button bindtap='tab2'>進入tab2</button>