业务需求:根据不同的权限进行不同的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
})
}
}
}