首先将所有tab使用到的页面创建好并且在pages里面配置好，要在pages.json中的"tabBar里面配置"custom": true将自带的tab底部导航关闭
"pages": [{"path": "pages/mine/mine","style": {"navigationBarTitleText": "我的"}},{"path": "pages/home/home","style": {"navigationBarTitleText": "首页"}},{"path": "pages/Operation/Operation","style": {"navigationBarTitleText": "运维"}},{"path": "pages/index/index","style": {"navigationBarTitleText": "服务"}},{"path" : "pages/shebe/shebe","style" : {"navigationBarTitleText" : "设备"}}],
"tabBar": {"custom": true,"color": "#7A7E83","selectedColor": "#1296db","borderStyle": "black","backgroundColor": "#F8F8F8","list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "static/imgs/imgs55.png","selectedIconPath": "static/imgs/imgs5.png"},{"pagePath": "pages/Operation/Operation","text": "运维","iconPath": "static/imgs/imgs66.png","selectedIconPath": "static/imgs/imgs6.png"},{"pagePath": "pages/shebe/shebe","text": "设备","iconPath": "static/imgs/imgs66.png","selectedIconPath": "static/imgs/imgs6.png"},{"pagePath": "pages/index/index","text": "服务","iconPath": "static/imgs/imgs11.png","selectedIconPath": "static/imgs/imgs1.png"},{"pagePath": "pages/mine/mine","text": "我的","iconPath": "static/imgs/imgs44.png","selectedIconPath": "static/imgs/imgs4.png"}]},在uni-app官网找到官网插件搜索tab底部找到自己要用的插件如（custom-tab-bar 自定义底部导航栏 - DCloud 插件市场）
在每一个用到tab页面的底部使用
<CustomTabBar modifyType="index"></CustomTabBar>
import CustomTabBar from "@/components/custom-tab-bar/index.vue";
export default {components: {CustomTabBar}},
}中modifyType="index"中的index根据自己定义的路径来定，在那个页面用感觉那个页面来定
如我在mine页面用代码就是
<CustomTabBar modifyType="mine"></CustomTabBar>
import CustomTabBar from "@/components/custom-tab-bar/index.vue";如何根据权限设置tab显示几个，要找到我们引入的tab页面，然后根据相关要求进行更改
<template><view v-if="responseRoles.includes('sitemanage')"><view class="tab-main"><view class="tabs" :class="{ spaceCenter: tabList.length === 1 }"><view class="tab-item" :class="{ active: currentIndex === index }" v-for="(item, index) in tabList":key="index" @click.stop="handleTab(item, index)"><image class="img" :src="currentIndex === index ? item.selectedIconPath : item.iconPath"></image><view class="text">{{ item.label }}</view></view></view></view></view><view v-if="responseRoles.includes('electricCollection')"><view class="tab-main"><view class="tabs" :class="{ spaceCenter: tabList.length === 1 }"><view class="tab-item" :class="{ active: currentIndex === index }" v-for="(item, index) in tabsTab":key="index" @click.stop="handleTab(item, index)"><image class="img" :src="currentIndex === index ? item.selectedIconPath : item.iconPath"></image><view class="text">{{ item.label }}</view></view></view></view></view><view v-if="responseRoles.includes('operation')"><view class="tab-main"><view class="tabs" :class="{ spaceCenter: tabList.length === 1 }"><view class="tab-item" :class="{ active: currentIndex === index }" v-for="(item, index) in tabList":key="index" @click.stop="handleTab(item, index)"><image class="img" :src="currentIndex === index ? item.selectedIconPath : item.iconPath"></image><view class="text">{{ item.label }}</view></view></view></view></view></template><script>import {appgetInfo} from '@/src/api/api.js';export default {props: {modifyType: {type: String,default: "",},},computed: {tabList() {return this.tabs.filter((item) => item.show);},},data() {return {currentIndex: 0,responseRoles: [],tabs: [{label: "首页",type: "home",url: "/pages/home/home",iconPath: "/static/imgs/imgs55.png",selectedIconPath: "/static/imgs/imgs5.png",show: true,},{label: "运维",type: "Operation",url: "/pages/Operation/Operation",iconPath: "/static/imgs/imgs66.png",selectedIconPath: "/static/imgs/imgs6.png",show: true,},{label: "服务",type: "index",url: "/pages/index/index",iconPath: "/static/imgs/imgs11.png",selectedIconPath: "/static/imgs/imgs1.png",show: true,},{label: "我的",type: "mine",url: "/pages/mine/mine",iconPath: "/static/imgs/imgs44.png",selectedIconPath: "/static/imgs/imgs4.png",show: true,}],tabsTab: [{label: "首页",type: "home",url: "/pages/home/home",iconPath: "/static/imgs/imgs55.png",selectedIconPath: "/static/imgs/imgs5.png",show: true,},{label: "设备",type: "shebe",url: "/pages/shebe/shebe",iconPath: "/static/imgs/imgs66.png",selectedIconPath: "/static/imgs/imgs6.png",show: true,},{label: "服务",type: "index",url: "/pages/index/index",iconPath: "/static/imgs/imgs11.png",selectedIconPath: "/static/imgs/imgs1.png",show: true,},{label: "我的",type: "mine",url: "/pages/mine/mine",iconPath: "/static/imgs/imgs44.png",selectedIconPath: "/static/imgs/imgs4.png",show: true,}]};},methods: {handleTab(item, index) {if (this.currentIndex === index) {return;}uni.switchTab({url: item.url,});},async fetchTabData() {try {const response = await appgetInfo();this.responseRoles = response.roles;} catch (error) {console.error("获取数据失败:", error);}},},mounted() {this.fetchTabData();if (this.modifyType.length) {this.currentIndex = this.tabList.findIndex((item) => item.type === this.modifyType);if(this.currentIndex===-1){this.currentIndex=1};}},};
</script><style lang="scss" scoped>.tab-main {position: fixed;z-index: 9999;width: 100%;bottom: 0;left: 0;background: #ffffff;box-shadow: 0rpx -1rpx 0rpx 0rpx #ebedf0;.tabs {display: flex;justify-content: space-between;padding: 0 50rpx;height: 120rpx;.tab-item {padding: 16rpx 50rpx;display: flex;align-items: center;flex-direction: column;.img {width: 50rpx;height: 50rpx;}.text {margin-top: 12rpx;font-size: 24rpx;font-weight: 500;color: #5d5d5d;line-height: 24rpx;}}.tab-item.active {.text {color: #4199d1;}}}.spaceCenter {justify-content: center;}}
</style>