uniapp动态修改tabBar内容

uniapp根据角色权限动态改变tabBar内容

本人小白，如果有不对的地方请多指教

根据uniapp官方API进行修改  uni.setTbaBarItem()

解决的关键：

let tabBarOptions = {
    index: 0,  //要修改的下标
    text: '首页',  //文字
    iconPath: 'static/images/index_like.png',
    selectedIconPath: 'static/images/index_like_c.png'
    };
    //uniapp的api，传入上面写好的对象
  uni.setTabBarItem(tabBarOptions);

示例代码：

<template>
  <view>
	  
    <merchant v-if="curUserType == 2 || curUserType == 3"></merchant>
    <admin v-if="curUserType == 1"></admin>
	<Consumer v-if="curUserType == 4"></Consumer>
	
  </view>
</template>
<script>
import merchant from "./merchant";
import admin from "./admin";
// 引入消费者的首页组件
import Consumer from "./consumer";
import { mapGetters } from "vuex";
export default {
  components: {
    merchant,
    admin,
	Consumer
  },
  computed: {
    ...mapGetters(["curUserType"]),  //获取商户类型
  },
  created(){
	console.log(this.curUserType) 
	 this.curUserTabBar()
  },
  methods:{
	  curUserTabBar(){
		  // 判断如果是管理员，就使用以下的tabBar
		  if(this.curUserType==1){
			  // tabBar的样式
			  uni.setTabBarStyle({
				color: '#FFF',
				selectedColor: '#007AFF',  //选中的颜色
				backgroundColor: '#000000',
				borderStyle: 'black'
			});
			  let tabBarOptions = {
			  	index: 0,  //要修改的下标
			  	text: '商户地图',  //文字
			  	iconPath: 'static/images/index_like.png',
			  	selectedIconPath: 'static/images/index_like_c.png'
			  };
			  let tabBarOptions1 = {
			  	index: 1,
			  	text: '附近商户',
			  	iconPath: 'static/images/index_like.png',
			  	selectedIconPath: 'static/images/index_like_c.png'
			  };
			  let tabBarOptions2 = {
			  	index: 2,
			  	text: '监督检查',
			  	iconPath: 'static/images/index_like.png',
			  	selectedIconPath: 'static/images/index_like_c.png'
			  };
			  // 将第一个修改
			  uni.setTabBarItem(tabBarOptions);
			  // 将第二个修改
			  uni.setTabBarItem(tabBarOptions1);
			  // 将第三个修改
			  uni.setTabBarItem(tabBarOptions2);
		  }else if(this.curUserType==2){  //判断如果等于2就是学校端
			 // tabBar的样式
			   uni.setTabBarStyle({
			 	color: '#FFF',
			 	selectedColor: '#007AFF',  //选中的颜色
			 	backgroundColor: '#000000',
			 	borderStyle: 'black'
			 });
			  let tabBarOptions = {
			  	index: 0,  //要修改的下标
			  	text: '附近商户',  //文字
			  	iconPath: 'static/images/index_like.png',
			  	selectedIconPath: 'static/images/index_like_c.png'
			  };
			  let tabBarOptions1 = {
			  	index: 1,  //要修改的下标
			  	text: '商户地图',  //文字
			  	iconPath: 'static/images/index_like.png',
			  	selectedIconPath: 'static/images/index_like_c.png'
			  };
			  let tabBarOptions2 = {
			  	index: 2,  //要修改的下标
			  	text: '个人中心',  //文字
			  	iconPath: 'static/images/index_like.png',
			  	selectedIconPath: 'static/images/index_like_c.png'
			  };
			  // 将第一个修改
			  uni.setTabBarItem(tabBarOptions);
			  // 将第二个修改
			  uni.setTabBarItem(tabBarOptions1);
			  // 将第三个修改
			  uni.setTabBarItem(tabBarOptions2);
		  }else if(this.curUserType==3){  //判断如果等于3就是商户端
			 // tabBar的样式
			   uni.setTabBarStyle({
			 	color: '#FFF',
			 	selectedColor: '#007AFF',  //选中的颜色
			 	backgroundColor: '#000000',
			 	borderStyle: 'black'
			 });
			  let tabBarOptions = {
			  	index: 0,  //要修改的下标
			  	text: '附近商户',  //文字
			  	iconPath: 'static/images/index_like.png',
			  	selectedIconPath: 'static/images/index_like_c.png'
			  };
			  let tabBarOptions1 = {
			  	index: 1,  //要修改的下标
			  	text: '商户地图',  //文字
			  	iconPath: 'static/images/index_like.png',
			  	selectedIconPath: 'static/images/index_like_c.png'
			  };
			  let tabBarOptions2 = {
			  	index: 2,  //要修改的下标
			  	text: '个人中心',  //文字
			  	iconPath: 'static/images/index_like.png',
			  	selectedIconPath: 'static/images/index_like_c.png'
			  };
			  // 将第一个修改
			  uni.setTabBarItem(tabBarOptions);
			  // 将第二个修改
			  uni.setTabBarItem(tabBarOptions1);
			  // 将第三个修改
			  uni.setTabBarItem(tabBarOptions2);
			 
		  }else if(this.curUserType==4){  //判断如果等于4就是消费者端
			  uni.setTabBarStyle({
					color: 'yellow',
					selectedColor: '#007AFF',  //选中的颜色
					backgroundColor: 'red',
					borderStyle: 'black'
				});
				let tabBarOptions = {
					index: 0,  //要修改的下标
					text: '附近商户',  //文字
					iconPath: 'static/images/index_like.png',  //图标
					selectedIconPath: 'static/images/index_like_c.png'  
				};
				let tabBarOptions1 = {
					index: 1,
					text: '商户地图',
					iconPath: 'static/images/index_like.png',
					selectedIconPath: 'static/images/index_like_c.png'
				};
				let tabBarOptions2 = {
					index: 2,
					text: '个人中心',
					iconPath: 'static/images/index_like.png',
					selectedIconPath: 'static/images/index_like_c.png'
				};
				// 将第一个修改
				uni.setTabBarItem(tabBarOptions);
				// 将第二个修改
				uni.setTabBarItem(tabBarOptions1);
				// 将第三个修改
				uni.setTabBarItem(tabBarOptions2);

		  }
	  }
  }
  
};
</script>