uni-app前端H5页面底部内容被tabbar遮挡

在这里插入图片描述
如果你想在原生 tabbar 上方悬浮一个菜单，之前写 bottom:0。这样的写法编译到 h5 后，这个菜单会和 tabbar 重叠，位于屏幕底部。
原码：

<view style="position: fixed;bottom:0;left: 0;background-color: #007AFF;
		right: 0;height: 100rpx;line-height: 106rpx;z-index: 99;">
			<view class="d-flex j-sa a-center">
				<label class="radio">
					<radio @tap="checkall" :checked="checkedall" color="#ee5f0d" />
					<text>全选</text>
				</label>
				<text>合计：{
   
   { totalmoney }}yuan</text>
				<text @tap="topay">结算</text>
			</view>
		</view>

在这里插入图片描述

uniapp增加了两个属性：

--window-top 
--window-bottom

APP 和小程序的导航栏和 tabbar 均是原生控件，元素区域坐标是不包含原生导航栏和 tabbar 的；而 H5 里导航栏和 tabbar 是 div 模拟实现的，所以元素坐标会包含导航栏和 tabbar 的高度

在这里插入图片描述
使用： bottom:var(–window-bottom)；
刚一开始我写在了bottom：0;这里，没有执行。但是多加padding-bottom可以执行。
padding-bottom: var(–window-bottom);

在这里插入图片描述
如果高度不够，可以使用：

padding-bottom: calc(var(–window-bottom) + 20px);

var(–status-bar-height) 变量在微信小程序环境为固定 25px，在 App 里为手机实际状态栏高度。
当设置 “navigationStyle”:“custom” 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(–status-bar-height) 的 view 放在页面顶部，避免页面内容出现在状态栏。
由于在 H5 端，不存在原生导航栏和 tabbar，也是前端 div 模拟。如果设置了一个固定位置的居底 view，在小程序和App端是在 tabbar 上方，但在 H5 端会与 tabbar 重叠。此时可使用 --window-bottom，不管在哪个端，都是固定在 tabbar 上方。
目前 nvue 在App端，还不支持 --status-bar-height变量，替代方案是在页面 onLoad 时通过 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度，然后通过 style 绑定方式给占位 view 设定高度。

uni-app前端H5页面底部内容被tabbar遮挡

猜你喜欢