解决tabbar的动态配置，以及切换tabbar闪烁

业务需求：根据不同的权限进行不同的tabbar配置，同时解决切换tabbar，tabbar闪烁的问题，需要用到uview组件。

首先在pages里面按照目录结构创建页面

在pages里面写入home的路径

home.vue template里面的写法

<template>
  <view>
	<view class="the-home">
			//所有tabbar页面
			//动态组件加载
			<component :is="component"></component>
	</view>
	// 动态tabbar的加载
	<u-tabbar class="tab-bar" v-model="current" :list="tabbar" @change="changeTb"></u-tabbar>
  </view>
</template>

在home页面里面引入需要的tabbar组件

	import Editor from './components/editor/editor.vue'
	import My from './components/my/my.vue'
	import Index from './components/index/index.vue'
	import User from './components/user/user.vue'

注册组件

components: {
	  Editor,
	  My,
	  Index,
	  User
  },

在data里面写入tabbarList， 具体配置参照uview的tabbarList

data() {
	return {
		current: 0 ,
		// 用户角色
		role: 'admin0',
		tabbarList:[
			[
				{
					title: 'my',
					name: 'My',
					iconPath: "home",
					selectedIconPath: "home-fill",
					customIcon: false,
					text: "我的",
				},
				{
					title: 'user',
					name: 'User',
					iconPath: "edit-pen",
					selectedIconPath: "edit-pen-fill",
					text: "user",
					customIcon: false,
				}
			],
			[
				{
					title: 'editor',
					name: 'Editor',
					iconPath: "home",
					selectedIconPath: "home-fill",
					customIcon: false,
					text: "编辑",
				},
				{
					title: 'Index',
					name: 'Index',
					iconPath: "edit-pen",
					selectedIconPath: "edit-pen-fill",
					text: "Index",
					customIcon: false,
				}
			],
		],
		tabbar: []
	}
}

// vue :is用法 动态组件的加载 不会的同学，可以去vue.js 学习
computed: {
	  component: function() {
		  return this.tabbar[this.current].name
	  }
  },

methods: {
// 根据用户角色加载tabbar，
	  getTabbar(){
		  switch(this.role) {
			  case 'user' :
			  this.tabbar = this.tabbarList[0]
			  break
			  case 'admin0':
			  this.tabbar = this.tabbarList[1]
		  }
	  },
	  changeTb(index){
		  this.current = index

			// 切换tabbar时，动态设置导航栏的文字
		  uni.setNavigationBarTitle({
		  	title: this.tabbar[index].name
		  })
	  }
  }
}