持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情

uniapp提供了公共tabbar，但是只适用于一种角色的菜单，或者多个角色的菜单相同的情况，现在项目有3种角色，分别是教师，学生和自由用户，展示的菜单不同，只能自定义组件tabbar，我们一起看看吧

index.vue

定义一个index页面，用来作为公共的页面存放不同的角色登录之后的中转页面，判断角色的不同来展示和隐藏

<template>
    <view class="index-container">
        <view class="content">
            <template v-if="userType == 1">
                <teaIndexPage v-if="currentPage == 0" ref="indexTeacher" />
                <teaTeachPage v-if="currentPage == 1" ref="teachTeacher" />
                <teaExePage v-if="currentPage == 2" ref="exerciseTeacher" />
                <teaPhysicalPage v-if="currentPage == 3" ref="physicalTeacher" />
                <teaMinePage v-if="currentPage == 4" ref="mineTeacher" />
            </template>
            <template v-if="userType == 2">
                <stuIndexPage v-if="currentPage == 0" ref="indexStudent" />
                <stuTeachPage v-if="currentPage == 1" ref="teachStudent" />
                <stuExePage v-if="currentPage == 2" />
                <stuVenuePage v-if="currentPage == 3" ref="venueStudent" />
                <stuMinePage v-if="currentPage == 4" ref="mineStudent" />
            </template>
            <template v-if="userType == 3">
                <userExePage v-if="currentPage == 0" />
                <stuMinePage v-if="currentPage == 1" />
            </template>
        </view>
        <view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
            <view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="tabbarChange(index)">
                <image class="item-img" :src="item.selectedIconPath" v-if="currentPage == index"></image>
                <image class="item-img" :src="item.iconPath" v-else></image>
                <view class="item-name" :class="{'tabbarActive': currentPage == index}" v-if="item.text">{{item.text}}
                </view>
            </view>
        </view>
    </view>
</template>

如图所示

声明tabbar数组，以学生的为例

stuList: [{                                                             
    "pagePath": "/pages/index/index",                               
    "iconPath": "../../static/image/index.png",                     
    "selectedIconPath": "../../static/image/index-active.png",      
    "text": "首页",                                                   
},                                                              
{                                                               
    "pagePath": "/pages/index/index",                            
     "iconPath": "../../static/image/teach.png",                 
     "selectedIconPath": "../../static/image/teach-active.png",  
     "text": "教学",                                               
 },                                                              
 {                                                               
     "pagePath": "/pages/index/index",                           
     "iconPath": "../../static/image/duanlian.png",              
     "selectedIconPath": "../../static/image/duanlian-active.png",  
    "text": "锻炼",                                                   
},                                                              
 {                                                               
     "pagePath": "/pages/index/index",                              
     "iconPath": "../../static/image/menu-venue.png",               
     "selectedIconPath": "../../static/image/menu-venue-active.png", 
     "text": "场馆",                                                   
 },                                                             
 {                                                              
     "pagePath": "/pages/index/index",                          
     "iconPath": "../../static/image/wode.png",                 
     "selectedIconPath": "../../static/image/wode-active.png",  
     "text": "我的",                                                   
 },                                                              
 ],

判断登录的用户身份，赋值不同的tabbar菜单

identity() {                           
    let userInfo = getStorage('userInfo');
    if (userInfo && userInfo.userType) {   
        this.userType = userInfo.userType;      
    }                                      
    if (this.userType == 1) {              
        this.list = this.teaList;              
    } else if (this.userType == 2) {       
        this.list = this.stuList;              
    } else if (this.userType == 3) {       
        this.list = this.userList;             
    }                                      
},

改变导航栏名称

因为是一个页面，所以需要根据角色和选中的索引，修改导航栏的名称

 changeTitle() {                                                                                  
     let title,                                                                                        
         index = this.currentPage,                                                                         
         userType = this.userType;                                                                         
     if (userType == 3) { // 自由用户                                                                      
         title = index === 0 ? '锻炼' : '我的';                                                                
     } else if (userType == 2) { // 学生                                                                 
         title = index === 0 ? '首页' : index === 1 ? '教学' : index === 2 ? '锻炼' : index === 3 ? '场馆' : '我的'; 
     } else if (userType == 1) { // 教师                                                                 
         title = index === 0 ? '首页' : index === 1 ? '教学' : index === 2 ? '锻炼' : index === 3 ? '体测' : '我的'; 
     }                                                                                                
     uni.setNavigationBarTitle({  
         title              
     });                                                                                   

获取组件

获取对应的组件，可以对组件内的方法进行调用

this.childComponent = this.$refs.mineTeacher; 

下拉刷新，掉接口

根据前面得到的组件名称，掉对应的接口实现数据刷新

onPullDownRefresh(){
    this.childComponent.getNewsList();
    uni.stopPullDownRefresh();
}