uniapp自定义tabbar,实现不同角色进入显示不同底部tabBar

可以通过以下步骤来实现uniapp自定义tabbar，实现不同角色进入显示不同底部tabBar：

1. 在pages文件夹下创建对应的角色页面，例如：student、teacher、admin等。

2. 在每个角色页面的vue文件中，使用自定义底部tabBar组件，并且通过props向组件传递当前角色的标识。

3. 在自定义底部tabBar组件中，根据接收到的角色标识动态渲染对应的底部tabBar。

4. 在App.vue文件中，通过uni.showTabBar和uni.hideTabBar方法来显示或隐藏底部tabBar。

5. 在main.js文件中，通过uni.getStorageSync方法获取当前用户角色信息，并将其存储在全局变量中，以便在各个页面中使用。

6. 在页面跳转时，需要根据当前用户角色信息来判断是否需要显示底部tabBar，并且通过uni.redirectTo或uni.navigateTo方法实现页面跳转。

举个例子，如果当前用户是学生，则在student页面中使用以下代码来引入自定义底部tabBar组件：

<template>
  <view>
    <text>这是学生页面</text>
    <my-tab-bar :role="'student'" />
  </view>
</template>

<script>
import MyTabBar from '@/components/MyTabBar.vue'

export default {
  components: {
    MyTabBar
  }
}
</script>

在自定义底部tabBar组件中，可以使用以下代码来根据接收到的角色标识动态渲染对应的底部tabBar：

<template>
  <view>
    <view v-if="role === 'student'">
      <!-- 学生底部tabBar -->
    </view>
    <view v-else-if="role === 'teacher'">
      <!-- 教师底部tabBar -->
    </view>
    <view v-else-if="role === 'admin'">
      <!-- 管理员底部tabBar -->
    </view>
  </view>
</template>

<script>
export default {
  props: {
    role: {
      type: String,
      required: true
    }
  }
}
</script>

通过以上步骤，就可以实现uniapp自定义tabbar，实现不同角色进入显示不同底部tabBar的功能了。