uniapp自定义突出tabbar以及安全距离问题_u-tabbar没留出安全距离

由于项目的定制化，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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

2、实现思路

list：是我们的底部导肮栏的一些设置，包含图标、选中图标、文字等。
将想要显示的页面当作子组件引入
更改组件，和before-switch切换前属性进行更改component，实现切换tabbar的效果。

3、注意项

注意的是：由于我的页面是不需要滚动条的，需要背景图铺满整个除tabbar以外的页面，但是调试过程发现了，虽然设置了页面的高度为calc(100vh - tabbar的高度) ,但是还是出现了滚动条的效果。
主要是底部安全距离的原因。设置一下代码的时候解决了问题。

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