前端uniapp自定义tabbar，在iPoneX上，tabbar有个盒子用了绝对定位position: absolute被遮住问题，env(safe-area-inset-bottom)无效

出现问题前，是因为一个盒子我用了绝对定位position: absolute，在其他机型正常，在iPoneX上就出现问题

出现问题前代码

<template>
	<view class="mian">
		<view class="box">
			<view class="sao">
				<view class="icon">
					<iconfont name="scan" size="50rpx" color="#fff"></iconfont>
				</view>
				<view class="name">扫一扫</view>
			</view>
			<view class="left">
				<view class="item">
					<view class="icon">
						<iconfont name="a-huiyuan1" size="45rpx"></iconfont>
					</view>
					<view>会员</view>
				</view>
				<view class="item">
					<view class="icon">
						<iconfont name="dingdan" size="45rpx"></iconfont>
					</view>
					<view>历史订单</view>
				</view>
			</view>
			<view class="right">
				<view class="item">
					<view class="icon">
						<iconfont name="shangpin" size="45rpx"></iconfont>
					</view>
					<view>订单</view>
				</view>
				<view class="item">
					<view class="icon">
						<iconfont name="yonghuming" size="45rpx"></iconfont>
					</view>
					<view>我的</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				aaa: 1
			}
		},
		computed: {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.mian {
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		height: 130rpx;
		width: 100%;
		box-shadow: 2rpx -4rpx 6rpx 0px #0000001a;
		font-size: 30rpx;
		
	    padding:calc(env(safe-area-inset-bottom) + 15rpx)  0 calc(env(safe-area-inset-bottom) + 15rpx) 0;
		.box {
			width: 100%;
			height: 100%;
			display: flex;
			position: relative;
			align-items: center;
			justify-content: space-between;

			.sao {
				position: absolute;
				top: -45rpx;
				
				left: 315rpx;

				.icon {
					width: 130rpx;
					height: 130rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					border: 15rpx solid #fff;
					box-shadow: 0px -2rpx 2rpx 0 #00000057;
					background-color: #0e67fe;
				}
				.name{
					text-align: center;
				}
			}

			.left,
			.right {
				width: 40%;
				height: 100%;
				display: flex;
				// flex-direction: column;
				justify-content: space-around;
				align-items: center;

				.item {
					width: 50%;
                      display: flex;
					  flex-direction: column;
					  align-items: center;
					.icon {
                       width: 50%;
					   height: 100%;
					   padding: 10rpx;
					   display: flex;
					   justify-content: center;
					   align-items: center;
						// padding: 10rpx;
						margin-bottom: 5rpx;
						border: 2rpx solid #999;
					}
				}

			}
		}
	}
</style>

解决问题后的效果

 解决问题需要算出距离top高度，top: calc(-1 * (env(safe-area-inset-bottom) + 55rpx)); 是其他机型正常显示的top加上iPhoneX高度*-1就好

解决后的代码

<template>
	<view class="mian">
		<view class="box">
			<view class="sao">
				<view class="icon">
					<iconfont name="scan" size="50rpx" color="#fff"></iconfont>
				</view>
				<view class="name">扫一扫</view>
			</view>
			<view class="left">
				<view class="item">
					<view class="icon">
						<iconfont name="a-huiyuan1" size="45rpx"></iconfont>
					</view>
					<view>会员</view>
				</view>
				<view class="item">
					<view class="icon">
						<iconfont name="dingdan" size="45rpx"></iconfont>
					</view>
					<view>历史订单</view>
				</view>
			</view>
			<view class="right">
				<view class="item">
					<view class="icon">
						<iconfont name="shangpin" size="45rpx"></iconfont>
					</view>
					<view>订单</view>
				</view>
				<view class="item">
					<view class="icon">
						<iconfont name="yonghuming" size="45rpx"></iconfont>
					</view>
					<view>我的</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				aaa: 1
			}
		},
		computed: {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.mian {
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		height: 130rpx;
		width: 100%;
		box-shadow: 2rpx -4rpx 6rpx 0px #0000001a;
		font-size: 30rpx;
		
	    padding:calc(env(safe-area-inset-bottom) + 15rpx)  0 calc(env(safe-area-inset-bottom) + 15rpx) 0;
		.box {
			width: 100%;
			height: 100%;
			display: flex;
			position: relative;
			align-items: center;
			justify-content: space-between;

			.sao {
				position: absolute;
				top: calc(-1 * (env(safe-area-inset-bottom) + 55rpx));
				left: 315rpx;

				.icon {
					width: 130rpx;
					height: 130rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					border: 15rpx solid #fff;
					box-shadow: 0px -2rpx 2rpx 0 #00000057;
					background-color: #0e67fe;
				}
				.name{
					text-align: center;
				}
			}

			.left,
			.right {
				width: 40%;
				height: 100%;
				display: flex;
				// flex-direction: column;
				justify-content: space-around;
				align-items: center;

				.item {
					width: 50%;
                      display: flex;
					  flex-direction: column;
					  align-items: center;
					.icon {
                       width: 50%;
					   height: 100%;
					   padding: 10rpx;
					   display: flex;
					   justify-content: center;
					   align-items: center;
						// padding: 10rpx;
						margin-bottom: 5rpx;
						border: 2rpx solid #999;
					}
				}

			}
		}
	}
</style>