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

问题:

在用uniapp写小程序的时候,底部有一部分内容没显示出来,被底部的tabbar遮挡住了

解决:

  • 给最外部的view设置样式padding-bottom: var(--window-bottom),如下

参考:

参考1
参考2

使用 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 元素设置下边距:

javascript 复制代码
.content{
  padding-bottom: var(--window-bottom);
}

这样只会在 H5 端给 .content 元素增加一个 tabbar 的高度 的下边距, uni-app 默认给 tabbar 的高度是50px 。

如果 50px 的高度还不够,可以使用下面的方法,在 tabbar 高度的基础上再增加 20px :

javascript 复制代码
.content{
  padding-bottom: calc(var(--window-bottom) + 20px);
}

具体什么意思,大家看一下下面 uni-app 给出的文档。

CSS变量

uni-app 提供内置 CSS 变量

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 设定高度。

相关推荐
京东零售技术5 分钟前
京东小程序JS API仓颉改造实践
前端
老A技术联盟14 分钟前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游18 分钟前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte23 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟31 分钟前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor32 分钟前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter33 分钟前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript
微客鸟窝34 分钟前
一文搞懂NVM管理Node.js:从安装到实战全攻略
前端
归于尽35 分钟前
Cookie、Session、JWT 的前世今生
前端
程序员辉哥36 分钟前
学会在Cursor中使用Rules生成代码后可以躺平了吗?
前端·后端