uni-app自定义底部tab并且根据字段显示和隐藏

首先将所有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>