uniapp如何根据不同角色自定义不同的tabbar

思路：

1.第一种是根据登录时获取的不同角色信息，来进行 跳转到不同的页面，在这些页面中使用自定义tabbar

2.第二种思路是封装一个自定义tabbar组件，然后在所有要展示tabbar的页面中引入使用

1.根据手机号码一键登录，在回调中获取用户信息进行跳转

  /**
	   * @param {object} e 获取手机号码组件回调参数
	   * @description 家政人员一键登录组件回调
	   */
    async getPhoneNumber(e) {
      if (e.detail.errMsg == "getPhoneNumber:ok") {
        this.phoneCode = e.detail.code;
        if (this.loginCode == "") {
          await this.getCode();
        }
        this.loginForm = {
          loginCode: this.loginCode,
          phoneCode: this.phoneCode,
        };
        this.$http.staffWxLogin(this.loginForm).then(res => {
          if (res.code == 200) {
            console.log(res, 'res')
            uni.setStorageSync("token", res.data.token);
            uni.setStorageSync("employeeStaffId", res.data.userId);
            uni.setStorageSync('userType', 1);
			/**
			 * 家政端
			 */
            // uni.reLaunch({
            //   url: '/pages/bottomPage/index'
            // })
			/**
			 * 司机端
			 */
			uni.reLaunch({
				url: "/page-diver/diver/tabBar/tabBar"
			})
							
          }
        })
      }
    },

2.在tabbar页面中完成自定义tabbar，并完成根据激活的tabbar展示不同页面的逻辑

其实就是调用v-if来控制不同页面的显示

<template>
	<view style="height: 100vh; overflow-y: hidden;display: flex;flex-direction: column;">
		<view style="overflow-y: hidden;flex-grow: 10;">
			<!-- 首页 -->
			<scroll-view style="height: 100%;" v-if="currentTab === 'index'" scroll-y>
				<index-com></index-com>
			</scroll-view>
			<!-- 客户 -->
			<scroll-view style="height: 100%;" v-if="currentTab === 'customer'">
				<index-com></index-com>
			</scroll-view>
			<!-- 人员 -->
			<view style="height: 100%;" v-if="currentTab === 'person'" >
				<index-com></index-com>
			</view>
			<!-- 合同 -->
			<view style="height: 100%;" v-if="currentTab === 'contract'">
				<index-com></index-com>
			</view>
			<!-- 工具 -->
			<view style="height: 100%;" v-if="currentTab === 'tool'" scroll-y>
				<index-com></index-com>
			</view>
		</view>
		<!-- tabBar -->
		<u-tabbar :value="currentTab" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
			activeColor="#FF7993" inactiveColor="#A7A7A7" style="flex: 0">
			<u-tabbar-item  v-for="(item,index) in iconList"  :text="item.label" :key="index" :icon="item.isActive?item.active:item.path" 
			@click="barClick"></u-tabbar-item>
		</u-tabbar> 
	</view>
</template>
 
<script>
	import indexCom from '../index/index.vue'
	export default {
		components: {
			indexCom,
		
		},
		data() {
			return {
				currentTab: 'index',
				iconList: [
					{
						path:'/static/tabBar/diver-home.png',
						active:'/static/tabBar/diver-achome.png',
						name:'index',
						isActive:true,
						label:'首页'
					},
					{
						path:'/static/tabBar/diver-car.png',
						active:'/static/tabBar/diver-accar.png',
						name:'tool',
						isActive:false,
						label:'我的车队'
					},
					{
						path:'/static/tabBar/diver-my.png',
						active:'/static/tabBar/diver-acmy.png',
						name:'my',
						isActive:false,
						label:'我的'
					}
				]
			}
		},
		methods: {
			barClick(e,name){
				for(let i =0;i<this.iconList.length;i++){
					if(i === e){
						 if(!this.iconList[i].isActive){
							 this.iconList[i].isActive = true
							 this.currentTab =i
							 console.log(this.currentTab,'currentTab')
						 }
					}else{
							 this.iconList[i].isActive = false
						 }
				}
			}
		}
	}
</script>
 
<style>
 
</style>

第二张思路就不赘述了，直接用上面的tabbar封装成组件引用即可，主要在pages.json中将tabbarlist设为空数组。