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

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;
			}
			
		}
	}