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

这篇博客介绍了在开发过程中遇到的一个布局问题,即在iPhoneX上使用绝对定位的元素出现显示异常。作者通过计算环境安全区域 inset 底部的高度并应用 `calc()` 函数来调整元素的 `top` 值,成功解决了问题。修复后的代码使用了 `env(safe-area-inset-bottom)` 来确保在不同设备上的适配。
摘要由CSDN通过智能技术生成

出现问题前,是因为一个盒子我用了绝对定位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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值