1.注意點

在pages.json中配置tabbar如下字段：custom：true ，會自動隱藏原生tabbar，使用自定義的tabbar

2.如何自定義呢

• 可以使用第三方組件庫的tabbar組件，然后二次封裝下內部封裝邏輯：
  1.點擊切換邏輯
  2.根據用戶類型，動態切換tabbar數據

3.具體邏輯實現，代碼如下

（1）封裝的自定義tabbar組件如下：

<template><tui-tabbar :current="propIndex" backgroundColor="#fff" :tabBar="tabBar" color="#000" selectedColor="#FF7D0D"@click="tabbarSwitch" :unlined="true"></tui-tabbar>
</template><script>import {globalTabbarData} from '@/common/utils.js'const app = getApp()export default {data() {return {tabBar: globalTabbarData}},props:{propIndex: { // 父組件傳入激活的tab索引default: 0}},created() {const userInfo = uni.getStorageSync('userInfo')// 用戶類型if(!userInfo.userType) { // 普通用戶this.tabBar = globalTabbarData.slice(2)} else { // 發布者this.tabBar = globalTabbarData.slice(0, 2)}},mounted() {uni.switchTab({url:  '/' + this.tabBar[this.propIndex].pagePath})},methods: {tabbarSwitch(e) {uni.switchTab({url:  '/' + this.tabBar[this.current].pagePath})},}}
</script>

（2）組件使用

<custom-tabbar :propIndex="1" />