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

最新推荐文章于 2024-09-14 18:27:44 发布
最新推荐文章于 2024-09-14 18:27:44 发布
阅读量1.4k 收藏 1
点赞数
文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FUFCY/article/details/125185149
版权
这篇博客介绍了在开发过程中遇到的一个布局问题，即在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>

SY_FC
关注
uni-app——uniapp 自定义 tabbar 的使用
qq_43201350的博客
01-17 560
uni-app——uniapp 自定义 tabbar 的使用
uniapp自定义tabbar
TYD0313的博客
10-15 4880
uniapp自定义封装tabbar
uniapp 开发H5中适配底部安全区域不生效的解决方法
inticaler的博客
04-23 1927
uniapp 开发H5中适配底部安全区域不生效的解决方法
Vant 3.* 底部安全区适配 部分页面不生效
sinat_31327113的博客
10-12 2777
底部安全区适配 // index.html 增加 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" /> // 全局样式增加 @supports(bottom:env(safe-area-inset-bottom)){ #app{ padding-bottom: co
uniapp 苹果安全域适配
最新发布
qq_31594665的博客
09-14 497
一、使用原生占位（仅App端支持）
iPhoneX 安全区域 safe-area-inset-*样式不生效
Stavin Li的博客
08-26 6151
iPhoneX 安全区域 safe-area-inset-*样式不生效 解决办法： 添加 meta name="viewport" 中增加viewport-fit=cover内容 <meta name="viewport" id="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover"> ...
Android设置底部距离,【报Bug】底部安全距离env(safe-area-inset-bottom)，编译到Android机无法识别...
weixin_31328555的博客
05-26 1万+
详细问题描述示例一：自定义tabBarpage{width: 100%;height: 50px;position: fixed;botttom: env(safe-area-inset-bottom);background-color: #108ee9;}编译到IOS端，正常显示为：固定在底部安全距离之上的tab条编译到Android机器，fixed布局失效，悬浮在顶部示例二：自定义全屏遮罩pa...
移动端开发 uniapp 基于苹果ios系统的安全区配置问题
超级小恐龙~
01-14 2846
height: calc(630upx + env(safe-area-inset-bottom)); safe-area-inset-left：安全区域距离左边边界的距离 safe-area-inset-right：安全区域距离右边边界的距离 safe-area-inset-top：安全区域距离顶部边界的距离 safe-area-inset-bottom ：安全距离底部边界的距离 ...
uniapp自定义tabbar图标样式
10-13
在移动应用开发领域，uniAPP是一个非常流行的框架，它允许开发者使用一套代码库来构建多平台的应用，包括iOS、Android以及H5等。本话题主要关注如何在uniAPP中自定义tabbar的图标样式，这对于提升应用的用户体验和...
uniapp小程序自定义动态tabbar
04-08
在开发小程序时，UI设计和用户体验是至关重要的部分，而TabBar（标签栏）作为页面间的导航工具，其样式和功能的定制性直接影响了用户的交互体验。uni-app是一款多端开发框架，它允许开发者用一套代码实现跨平台的小...
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
09-23
自定义tabbar底部导航栏，简洁，方便，二开 使用教程 将组件拷贝到uni_modules目录内，然后其他页面进行引用即可 <TC-tabBar :zhi="zhi"></TC-tabBar> </template>
【uniapp】解决uniapp自定义错误页面，导航栏返回失效问题
王博的博客
08-18 3632
背景： 因为uniapp自带的原生错误页面效果不好，就手动在hybrid/html目录下新建了error.html页面，但是突然发现导航栏返回失效，怎么点击也回不到上一页了。 解决： 1. 监听点击导航栏返回事件 2. 捕获事件后执行uni.switchTab事件 // 开始监听backbutton事件 function startBack() { plus.key.addEventListener('backbutton', backListener, false); }
使用uniapp ios端padding-top会遮盖固定定位的原因
qq_36238778的博客
04-13 1128
最近在用uniapp做一个公司的移动端官网，无意间发现一个bug： 当页面设置为min-heigh： 100%时，为页面添加padding-top，再用position：fixed固定定位固定头部导航栏，发现顶部导航栏内容被遮盖，但是padding-top的白色背景还在。 解决办法：给导航栏的兄弟元素加margin-top 积累工作中的点滴，将来必成大器！ ...
uniapp tabBar配置后不显示，无效的问题
热门推荐
qq_42339350的博客
05-10 1万+
原因 tabBar.list数组的第一项必须和pages配置中的第一项要相同。 错误写法 tabBar.list的以一个数组单独配置了页面。 正确写法 和pages的第一个保持相同 然后就好了
uni-app z-index无效的解决办法（遮罩层）
qq_49438920的博客
11-06 8488
前言： 现在是做一个遮罩层效果，需要部分组件要在遮罩层上面，其他比遮罩层低。效果如图： 问题： 于是想到在需要在遮罩层以上的那个组件的z-index使层级拉高 但是效果却不如我们想的那样 查询资料： 看了别人的文章说这种情况有两种原因 第一种又有三小点： 1、父标签 position属性为relative； 2、问题标签无position属性（不包括static）； 3、问题标签含有浮动(float)属性。 解决办法为： 1、position:relative改为position:absolute；
《safe-area-inset-bottom之兼容问题》
杨晓风 迷迭香的记忆
06-01 4249
背景 身为技术开发，每天惊喜不断。收到业务方反馈，定位为商城的小程序在个别机型上出现结算条不显示的情况。这个bug处于收益喉咙的位置，zhuo's
uniapp h5 tabBar兼容IOS手机底部黑线
码农键盘上的梦
02-23 3073
因为我这边的tabbar导航栏是自己写的，不是用的uniapp自带的，所以如果遇到IOS手机底部有黑线的这种，需要将tabbar导航栏的高度调整一下才可以。app底部的tabbar 导航栏如果遇到IOS手机则会出现问题。一、pages.json文件中添加tarBar。[补充2：在app中$route找不到的问题]补充1：自定义switchTab跳转方法。uniapp自定义tabBar方案。二、把原生的tabBar隐藏起来。三、自定义一个tabBar组件。
css属性——env()和constant()设置安全区域
LiangRZ
11-26 4162
env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量： safe-area-inset-left：安全区域距离左边边界的距离 safe-area-inset-right：安全区域距离右边边界的距离 safe-area-inset-top：安全区域距离顶部边界的距离 safe-area-inset-bottom ：安全距离底部边界的距离 而env()和constant()函数有个必要的使用前提，H5网页设置viewport-f
解决env(safe-area-inset-bottom)安卓底部为0的问题
knight_ssssss的博客
12-04 1060
最优雅的解决env(safe-area-inset-bottom)安卓底部为0的问题
uniapp自定义tabbar组件解决闪烁问题
06-06
uniapp自定义tabbar组件解决闪烁问题的方法如下： 1. 使用 position: fixed; 将 tabbar 固定在底部； 2. 在页面中将底部内容的 padding-bottom 设为 tabbar 的高度，以免内容被 tabbar 遮挡； 3. 在 tabbar 组件的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值