由于项目的定制化，tabbar想要中间一个底部菜单栏突出的效果，于是只能定制化tabbar。

使用u-view的u-tabbar

实际效果：

1、实现的代码

<template>
	<view class="container" >
		<view class="u-page">
			<view v-cloak>
				<component :is="component"></component>
			</view>
		<!-- 底部导航栏 -->
		<u-tabbar v-model="current" :fixed="true" :list="list" :mid-button="true" :before-switch="beforeSwitch"
			active-color='#5098FF'></u-tabbar>
	</view>
</template>

<script>
	import myHome from '@/pages/home/component/myHome.vue'
	import homeMine from '@/pages/home/component/homeMine.vue'
	export default {

		data() {
			return {
				list: [{
						iconPath: "/static/images/home.png",
						selectedIconPath: "/static/images/homeSelected.png",
						text: '首页',
						customIcon: false,
					},
					{
						iconPath: "/static/images/scan.png",
						midButton: true,
						customIcon: false,
					},
					{
						iconPath: "/static/images/user.png",
						selectedIconPath: "/static/images/userSelected.png",
						text: '我的',
						customIcon: false,
					}
				],
				current: 0,
				showScaninfo: false, //是否显示弹窗
				component: "myHome",
			}
		},
		onShow() {
			uni.hideTabBar({
				animation: false
			})
		},
		components: {
			myHome,
			homeMine
		},
		methods: {
			beforeSwitch(index) {
				switch (index) {
					case 0:
						this.component = 'myHome'
						this.current = index
						break
					case 1:
						this.toScan()
						break
					case 2:
						this.component = 'homeMine'
						this.current = index
						break
				}
			},
			// 调用扫一扫
			toScan() {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-tabbar {
		width: 100%;
		height: 50px;
		position: fixed;
		botttom: env(safe-area-inset-bottom);
		background-color: #fff;
	}

	.container {
		
	}

	.u-page {
		height: 100%;
	}
</style>

2、实现思路

list：是我们的底部导肮栏的一些设置，包含图标、选中图标、文字等。

将想要显示的页面当作子组件引入 <component :is="component"></component>更改组件，和before-switch切换前属性进行更改component，实现切换tabbar的效果。

3、注意项

注意的是：由于我的页面是不需要滚动条的，需要背景图铺满整个除tabbar以外的页面，但是调试过程发现了，虽然设置了页面的高度为calc(100vh - tabbar的高度) ,但是还是出现了滚动条的效果。

主要是底部安全距离的原因。设置一下代码的时候解决了问题。

.u-tabbar {
	botttom: env(safe-area-inset-bottom);
}