uniapp 如何自定义底部TabBar 且还能使用 uni.switchTab

1.隐藏tabBar

        在pages.json文件下 tabBar选项下有个 height配置项设置为0，这个时候uniapp自带的tabBar已经不会在显示了，当是你还是得需要吧你自定义tabBar所需的页面放进来

2.创建tabBar文件

        建议在你的项目下面创建一个components文件夹专门放你的自定义组件，然后在新建一个TabBar文件，这里的样式文件可以按照自己的喜好使用scss、less、css文件

直接废话不多说上代码

这个是index.vue文件下的代码 

<template>
	<view style="height: 180rpx;">
		<view class="content" :style="{zIndex}">
			<view class="tabber_box">
				<view v-for="(item,index) in tabBars" :key="index"
					:style="{width:`${ratio}%`,display:'flex',justifyContent:'space-around',margin: '24rpx 0'}">
					<view class="tabber_item" @click="onNav(item.pagePath)">
						<image v-if="currentPath === item.pagePath" :src="item.iconPath"></image>
						<image v-else :src="item.selectedIconPath"></image>
						<text
							:style="{color:currentPath === item.pagePath ? item.selectedColor : item.color}">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		props: {
			currentPath: { // 当前页面路径
				type: String,
				default: '/pages/index/index',
			},
			zIndex: { // 界面层级
				type: Number,
				default: 10
			}
 
		},
		data() {
			const color = '#FFFFFF66';
			const selectedColor = '#FFF';
			return {
				tabBars: [{
						name: '首页',
						iconPath: '../../static/tabbar/index.png',
						selectedIconPath: '../../static/tabbar/selectd_index.png',
						pagePath: '/pages/index/index',
						color,
						selectedColor,
					},
					{
						name: '邀请',
						iconPath: '../../static/tabbar/lnvite.png',
						selectedIconPath: '../../static/tabbar/selectd_lnvite.png',
						pagePath: '/pages/lnvite/index',
						color,
						selectedColor,
					},
					{
						name: 'VIP',
						iconPath: '../../static/tabbar/vip.png',
						selectedIconPath: '../../static/tabbar/selectd_vip.png',
						pagePath: '/pages/vip/index',
						color,
						selectedColor,
					},
					{
						name: '我的',
						iconPath: '../../static/tabbar/my.png',
						selectedIconPath: '../../static/tabbar/selectd_my.png',
						pagePath: '/pages/my/index',
						color,
						selectedColor,
					},
 
				],
				ratio: 0,
				isLogin: false,
			}
		},
		mounted() {
			this.ratio = 100 / this.tabBars.length;
		},
		methods: {
			onNav(url) {
					if (this.currentPath !== url) uni.switchTab({
						url
					});
			}
		}
	}
</script>
 
<style lang="scss" scoped>
	@import './index.scss';
</style>

这个是index.scss文件下的代码

.content {
		position: fixed;
		bottom: 0;
		width: 100%;
		.tabber_box {
			display: flex;
			flex-direction: row;
			align-items: center;
			background: #151d33;
			padding-bottom: calc(env(safe-area-inset-bottom) - 48rpx) ; // 适配iphoneX的底部
			padding-bottom: calc(env(safe-area-inset-bottom) - 48rpx); /*兼容 IOS>11.2*/
			
			image {
				width: 56rpx;
				height: 56rpx;
				// margin-bottom: 16rpx;
			}
 
			.tabber_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 28rpx;
			}
			
		}
	}

3.引入到全局

在main.js / main.ts文件下 把写好的TabBar组件注册到全局中

4.如何使用

如果你的页面路径当前在 /pages/index/index 就引入在映入，同理你需要在那个页面显示切选择状态是这个页面 就吧currentPath 这个参数给当前页面路径

最终效果