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" />