有时候，小程序的业务场景需要根据不同用户身份，展示不同的内容。这时候我们就可以采用自定义的形式，根据用户的身份来动态的展示底部tabBar，注意：底部tabBar最多只能显示5个，自定组件中的tabBar必须跟app.json中的一样。

自定义实例可参考官方例子自定义tabBar

自定义组件的生命周期

实现的效果

创建四个文件，来模拟不同身份的用户，进行动态切换底部导航
app.json

{
  "pages": [
    "pages/login/login",
    "pages/index/index",
    "pages/user/user",
    "pages/shopping/shopping",
    "pages/members/members",
    "pages/switchRole/switchRole"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "custom": true, // 自定底部需要加上这一项
    "color": "#b5b5b5",
    "selectedColor": "#fa8582",
    "backgroundColor": "white",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-color.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "个人中心",
        "iconPath": "images/user.png",
        "selectedIconPath": "images/user-color.png"
      },
      {
        "pagePath": "pages/shopping/shopping",
        "text": "商城",
        "iconPath": "images/shopping.png",
        "selectedIconPath": "images/shopping-color.png"
      },
      {
        "pagePath": "pages/members/members",
        "text": "会员中心",
        "iconPath": "images/member.png",
        "selectedIconPath": "images/member-color.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

在app.js中创建一个全局的list存放底部导航

globalData: {
    list: [], // tabBar
}

把用户身份对应的底部导航抽离出来，放在公共的文件中
utils/tabBarUrl.js 通过export暴露出去

// 普通用户
export const averageUser = [
  {
    "pagePath": "/pages/index/index",
    "text": "首页",
    "iconPath": "/images/home.png",
    "selectedIconPath": "/images/home-color.png"
  },
  {
    "pagePath": "/pages/user/user",
    "text": "个人中心",
    "iconPath": "/images/user.png",
    "selectedIconPath": "/images/user-color.png"
  }
]

// 经销商
export const dealers = [
  {
    "pagePath": "/pages/shopping/shopping",
    "text": "商城",
    "iconPath": "/images/shopping.png",
    "selectedIconPath": "/images/shopping-color.png"
  },
  {
    "pagePath": "/pages/members/members",
    "text": "会员中心",
    "iconPath": "/images/member.png",
    "selectedIconPath": "/images/member-color.png"
  }

]

登录成功后，把对应的list列表赋值到app.js中的list，然后跳转到对应的tabBar页面

 // 引入对应的公共文件
  import { averageUser } from '../../utils/tabBarUrl'
const app = getApp()
// 登录
login () {
    app.globalData.list =  averageUser
    wx.switchTab({
      url: '/pages/index/index',
    })
  },

在对应的tabBar页面中加入选中效果, 必须是onShow钩子函数中调用，不然会出现选中效果不准的情况

/**
   * 生命周期函数--监听页面显示
   */
  onShow () {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 1 //选中效果 当前tabBar页面在list中对应的下标， 
      })
    }
  },

在自定义tabBar组件中，从app.js中把赋值的tabBar列表赋值到组件的list中
注意： 原生自定义底部文件必须在根目录下，而且文件名必须是custom-tab-bar

data: {
    selected: 0,
    color: "#b5b5b5",
    selectedColor: "#fa8582",
    list:[]
  },
  lifetimes: {
  // 在组件实例进入页面节点树时赋值
    attached () {
      this.setData({
        list: app.globalData.list
      })
    },
  },

在切换身份角色时，进行对应的赋值，同时，在对应的身份tabBar首页今天tabBar重新赋值，不然tabBar不会更新，这样就可以完美的实现根据不同的身份切换展示不同的底部导航栏

// 引入对应的公共文件
import { averageUser, dealers } from '../../utils/tabBarUrl'
const app = getApp()
// 普通用户
ChangeAverage () {
  app.globalData.list =  averageUser
  wx.switchTab({
    url: '/pages/index/index',
  })
},
// 商户
changeShopping () {
  app.globalData.list =  dealers
  wx.switchTab({
    url: '/pages/shopping/shopping',
  })
},
// 在对应的tabBar页面重新赋值tabBar中的list
/**
* 生命周期函数--监听页面显示
*/
onShow () {
  if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0,
        list: app.globalData.list
      })
  }
}

最后一点，基础库版本不宜过低，最好使用高版本