小程序ios端自定义TabBar遮挡内容、TabBar被ios系统控制器遮挡的解决方案

<view class=""><view v-if="isIphoneX" style="height: 1px;width:100%;"/> <view :class="isIphoneX?'isIphoneX footerButton':'footerButton'"><!-- 解决ios导航条遮挡TabBar

jaqi.l

1838人浏览 · 2021-08-06 17:15:19

jaqi.l · 2021-08-06 17:15:19 发布

<view class="">
		<view v-if="isIphoneX" style="height: 1px;width:100%;"/> <!-- 解决遮挡内容 -->
		<view :class="isIphoneX?'isIphoneX footerButton':'footerButton'">  <!-- 解决ios导航条遮挡TabBar问题 -->
	</view>
</view>

判断是否是ios端

uni.getSystemInfo({
	success: function (res) {
		// iPhone机型有横杆的导航栏高度大于40
		if (res.safeArea.top > 40) {
			that.isIphoneX = true;
		}
	}
});

.footerButton{
	position: fixed;
	bottom: 0rpx;
	width: 100%;
	height:84rpx;
	font-size: 20rpx;
	display: flex;
	flex-direction:row;
	flex-wrap: nowrap;
	justify-content:space-around;
	background-color: #fff;
}
.isIphoneX{
	padding-bottom: 50rpx;
}