<meta charset="utf-8">
一个项目有多个角色，比如医生和患者，tabBar跳转的路径不一样，但是在pages.json中无法配置多个tabBar，这时候就要自定义tabBar了
下面一个小小demo，场景是医生和患者端，一共四个不同的页面，分别是医生首页，患者首页，医生我的页面，患者我的页面，tabbar要求根据不同的角色跳转到对应的路径
（一）配置pages.json
custom设置为true，并且把所有需要切换的页面都配在list中，否则之后切换tab用switchTab方法无效；
"tabBar": {
"custom": true,
"color": "#333333",
"selectedColor": "#4256A8",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/patientHome/patientHome",
"iconPath": "static/images/home.png",
"selectedIconPath": "static/images/home_s.png",
"text": "首页"
},
{
"pagePath": "pages/mine/mine",
"iconPath": "static/images/mine.png",
"selectedIconPath": "static/images/mine_s.png",
"text": "我的"
},
{
"pagePath": "pages/doctorDine/doctorDine",
"iconPath": "static/images/mine.png",
"selectedIconPath": "static/images/mine_s.png",
"text": "我的"
},
{
"pagePath": "pages/volunteerHome/volunteerHome",
"iconPath": "static/images/mine.png",
"selectedIconPath": "static/images/home_s.png",
"text": "首页"
},
{
"pagePath": "pages/pharmacyHome/pharmacyHome",
"iconPath": "static/images/mine.png",
"selectedIconPath": "static/images/home_s.png",
"text": "首页"
}
]
}
（二）tab-bar.vue 组件
<template>
<view class="tab-bar">
<view v-for="(item,index) in list" :key="index" class="tab-bar-item" @click="switchTab(item, index)">
<image class="tab_img" :src="selected === index ? item.selectedIconPath : item.iconPath"></image>
<view class="tab_text" :style="{color: selected === index ? selectedColor : color}">{{item.text}}</view>
</view>
</view>
</template>
<script>
export default {
props: {
selected: { // 当前选中的tab index
type: Number,
default: 0
},
userIdentity: { // 当前角色
type: Number,
default: 0
}
},
data() {
return {
color: "#333333",
selectedColor: "#333333",
list: [{
pagePath: "/pages/patientHome/patientHome",
iconPath: "/static/images/home.png",
selectedIconPath: "/static/images/home_s.png",
text: "首页"
}, {
pagePath: "/pages/mine/mine",
iconPath: "/static/images/mine.png",
selectedIconPath: "/static/images/mine_s.png",
text: "我的"
}]
}
},
methods: {
switchTab(item, index) {
console.log("item", item)
console.log("index", index)
let url = item.pagePath;
// 对应患者和医生的首页
if (index == 0) {
switch (this.userIdentity) {
// 患者
case 0:
url = "/pages/patientHome/patientHome"
break
// 医生
case 1:
url = "/pages/doctorHome/doctorHome"
break
}
}
// 对应患者和医生的我的页面
if (index == 1) {
switch (this.userIdentity) {
// 患者
case 0:
url = "/pages/mine/mine"
break
// 医生
case 1:
url = "/pages/doctorMine/doctorMine"
break
}
}
uni.switchTab({
url
})
}
}
}
</script>
<style lang="scss">
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
background: white;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.tab_img {
width: 37rpx;
height: 41rpx;
}
.tab_text {
font-size: 20rpx;
margin-top: 9rpx;
}
}
}
</style>
（三）不同的角色调用tabBar
记得每个页面都要导入并注册tab-bar自定义组件
<script>
import tabBar from "@/components/tab-bar.vue"
export default {
components: {
tabBar
}
}
</script>
医生端：
<tab-bar :userIdentity="1"></tab-bar>
患者端：
<tab-bar :userIdentity="0"></tab-bar>
我的页面：
<tab-bar :selected="1"></tab-bar>
作者：hao_developer
链接：https://www.jianshu.com/p/18d8c7ad7da4
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
