uni-app前端H5页面底部内容被tabbar遮挡的问题解决

使用 uni-app 框架开发的一个项目发现 H5 端页面底部的内容被导航栏Tabbar遮挡小程序端可以正常显示。查阅资料得知uni-app 新增了2个 CSS 变量--window-top和--window-bottom详细说明如下APP 和小程序的导航栏和 tabbar 均是原生控件元素区域坐标是不包含原生导航栏和 tabbar 的而 H5 里导航栏和 tabbar 是 div 模拟实现的所以元素坐标会包含导航栏和 tabbar 的高度。为了优雅的解决多端高度定位问题uni-app 新增了2个css变量--window-top和--window-bottom这代表了页面的内容区域距离顶部和底部的距离。举个实例如果你想在原生 tabbar 上方悬浮一个菜单之前写bottom:0。这样的写法编译到 h5 后这个菜单会和 tabbar 重叠位于屏幕底部。而改为使用bottom:var(--window-bottom)则不管在 app 下还是在 h5 下这个菜单都是悬浮在 tabbar 上浮的,这就避免了写条件编译代码。使用方法官方给出的实例不够清晰实际上这个属性是在需要边距或者定位的元素上使用的比如给.content元素设置下边距.content{ padding-bottom: var(--window-bottom); }这样只会在 H5 端给.content元素增加一个 tabbar 的高度 的下边距 uni-app 默认给 tabbar 的高度是50px 。如果 50px 的高度还不够可以使用下面的方法在 tabbar 高度的基础上再增加 20px .content{ padding-bottom: calc(var(--window-bottom) 20px); }具体什么意思大家看一下下面 uni-app 给出的文档。CSS变量uni-app 提供内置 CSS 变量CSS变量描述App小程序H5--status-bar-height系统状态栏高度系统状态栏高度、nvue注意见下25px0--window-top内容区域距离顶部的距离00NavigationBar 的高度--window-bottom内容区域距离底部的距离00TabBar 的高度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 设定高度。代码块快速书写 css 变量的方法是在 css 中敲 hei在候选助手中即可看到 3 个 css 变量。HBuilderX 1.9.6 以上支持示例 1 - 普通页面使用 css 变量template !-- HBuilderX 2.6.3 新增 page-meta, 详情https://uniapp.dcloud.io/component/page-meta -- page-meta navigation-bar / /page-meta view view classstatus_bar !-- 这里是状态栏 -- /view view状态栏下的文字/view /view /template style .status_bar { height: var(--status-bar-height); width: 100%; } /styletemplate view view classtoTop !-- 这里可以放一个向上箭头它距离底部tabbar上浮10px-- /view /view /template style .toTop { bottom: calc(var(--window-bottom) 10px); } /style