uniapp自定义tabbar,实现不同角色进入显示不同底部tabBar的完整代码

以下是一个简单的uniapp自定义tabbar，实现不同角色进入显示不同底部tabBar的完整代码：

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

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

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

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

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

3. 在自定义底部tabBar组件中，根据接收到的角色标识动态渲染对应的底部tabBar。这里使用了uni-icons组件来实现图标的展示。

<template>
  <view>
    <view v-if="role === 'student'">
      <view class="tab-bar">
        <view class="tab-bar-item" @click="redirectTo('/pages/student/index')">
          <uni-icons type="home" :size="24" :color="activeTab === 'home' ? '#007aff' : '#c8c8c8'" />
          <text :style="{ color: activeTab === 'home' ? '#007aff' : '#c8c8c8' }">首页</text>
        </view>
        <view class="tab-bar-item" @click="redirectTo('/pages/student/mine')">
          <uni-icons type="contact" :size="24" :color="activeTab === 'mine' ? '#007aff' : '#c8c8c8'" />
          <text :style="{ color: activeTab === 'mine' ? '#007aff' : '#c8c8c8' }">我的</text>
        </view>
      </view>
    </view>
    <view v-else-if="role === 'teacher'">
      <view class="tab-bar">
        <view class="tab-bar-item" @click="redirectTo('/pages/teacher/index')">
          <uni-icons type="home" :size="24" :color="activeTab === 'home' ? '#007aff' : '#c8c8c8'" />
          <text :style="{ color: activeTab === 'home' ? '#007aff' : '#c8c8c8' }">首页</text>
        </view>
        <view class="tab-bar-item" @click="redirectTo('/pages/teacher/mine')">
          <uni-icons type="contact" :size="24" :color="activeTab === 'mine' ? '#007aff' : '#c8c8c8'" />
          <text :style="{ color: activeTab === 'mine' ? '#007aff' : '#c8c8c8' }">我的</text>
        </view>
      </view>
    </view>
    <view v-else-if="role === 'admin'">
      <view class="tab-bar">
        <view class="tab-bar-item" @click="redirectTo('/pages/admin/index')">
          <uni-icons type="home" :size="24" :color="activeTab === 'home' ? '#007aff' : '#c8c8c8'" />
          <text :style="{ color: activeTab === 'home' ? '#007aff' : '#c8c8c8' }">首页</text>
        </view>
        <view class="tab-bar-item" @click="redirectTo('/pages/admin/mine')">
          <uni-icons type="contact" :size="24" :color="activeTab === 'mine' ? '#007aff' : '#c8c8c8'" />
          <text :style="{ color: activeTab === 'mine' ? '#007aff' : '#c8c8c8' }">我的</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    role: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      activeTab: 'home'
    }
  },
  methods: {
    redirectTo(url) {
      if (url !== getCurrentPages()[getCurrentPages().length - 1].route) {
        uni.redirectTo({
          url
        })
      }
    }
  }
}
</script>

<style>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  background-color: #fff;
}

.tab-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #c8c8c8;
}

.tab-bar-item uni-icons {
  margin-bottom: 2px;
}
</style>

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

<template>
  <view>
    <navigator url="/pages/student/index" open-type="redirect">
      <text>进入学生页面</text>
    </navigator>
    <navigator url="/pages/teacher/index" open-type="redirect">
      <text>进入教师页面</text>
    </navigator>
    <navigator url="/pages/admin/index" open-type="redirect">
      <text>进入管理员页面</text>
    </navigator>
    <my-tab-bar v-if="showTabBar" :role="role" />
  </view>
</template>

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

export default {
  components: {
    MyTabBar
  },
  data() {
    return {
      showTabBar: false,
      role: ''
    }
  },
  onShow() {
    this.getRole()
  },
  methods: {
    getRole() {
      this.role = uni.getStorageSync('role')
      this.showTabBar = !!this.role
      if (this.showTabBar) {
        uni.showTabBar()
      } else {
        uni.hideTabBar()
      }
    }
  }
}
</script>

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

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

uni.setStorageSync('role', 'student') // 模拟设置当前用户角色信息

完整的代码可以在GitHub上查看：https://github.com/hiynn/uniapp-custom-tabbar