uniapp顶部安全距离（包括app）

最新推荐文章于 2025-04-25 15:26:09 发布
最新推荐文章于 2025-04-25 15:26:09 发布
阅读量1.1w 收藏 7
点赞数 5
文章标签： uni-app 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44646763/article/details/119237609
版权
本文探讨了在开发过程中如何避免顶部布局问题，通过getMenuButtonBoundingClientRect方法失效后的替代方案——uniapp中的var(--window-bottom)。作者分享了使用CSS变量设置顶部间距的方法，并建议封装导航组件以提高复用性，减少页面调整工作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在自定义导航的时候，如果不对顶部距离处理的话就会顶到屏幕最上边，标题可能会被手机的齐刘海挡住。

之前在做小程序的时候，我都是用 getMenuButtonBoundingClientRect() 获取胶囊菜单的顶部距离等信息来处理顶部安全距离，但在app和H5上用不了，不过uniapp提供了个更好用的 var(–window-bottom) （在css使用）

padding-top:  var(--status-bar-height) ;//给组件加个上边距

/*或者写一个占位div，高度设为css变量
height: var(--status-bar-height);*/

可以封装个自定义导航组件，这样就不用每个页面都改了。

mr_cmx
关注
uniapp去掉顶部导航栏后计算手机安全区距离，css背景模糊效果
m0_63250938的博客
10-18 2658
uniapp自带可以计算手机设备安全区的代码，使用var(--status-bar-height) ; 便可直接获取
uniapp获取元素距离顶部的距离
seimeii的博客
03-01 6255
var that=this; const query = uni.createSelectorQuery().in(that); query.select('元素').boundingClientRect(data => { console.log(data) }).exec();
【uniapp】uniapp设置安全区域：
SunPeng的博客
08-11 4219
【uniapp】uniapp设置安全区域：
uniapp获取安全区域的css
Yzfeng21的博客
10-09 520
env()和constant()需要同时存在，且顺序不能调换。还有js动态获取安全区域。
【uniapp】自定义导航栏时，设置安全距离,适配不同机型+最顶部的状态栏修改字体颜色
ALLEN'Blog
04-03 385
下面给大家总结了一套适用于网安零基础的学习路线，应届生和转行人员都适用！
uniapp自定义顶部安全距离
weixin_64427878的博客
02-20 173
uniapp自定义顶部安全距离
【shiro】shiro反序列化漏洞综合利用工具v2.2（下载、安装、使用）
小王的技术库
04-03 516
④主机攻防演练：MS17-010、MS08-067、MS10-046、MS12-20等。④Web渗透工具：Nmap、BurpSuite、SQLMap、其他（菜刀、漏扫等）②信息收集技术：主动/被动信息搜集、Nmap工具、Google Hacking。③漏洞扫描、漏洞利用、原理，利用方法、工具（MSF）、绕过IDS和反病毒侦察。⑤Web漏洞原理与防御：主动/被动攻击、DDOS攻击、CVE漏洞复现。③常见协议解析（HTTP、TCP/IP、ARP等）④等保简介、等保规定、流程和规范。③网络安全运营的概念。
uniapp设置APP端webview顶部距离
m0_74838657的博客
09-06 612
$getAppWebview() // 此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效。top: 160, //webview距离顶部高度。}, 1000) // 如果是页面初始化调用时，需要延时一下。
解决uniapp底部顶部 安全距离
weixin_71462678的博客
09-06 1925
还有这个问题 就是我想要可视区的高度 其实不用那么麻烦· 直接用flex定位就ok。今天发现一个真机调试的问题 就是顶部安全距离和底部安全距离。
uni-app 获取顶部安全距离 ，底部安全距离，元素的高度
weixin_45414972的博客
04-24 8187
【代码】uni-app 获取顶部安全距离 ，底部安全距离，元素的高度。
记录一下uni-app 打包小程序设置页面的安全距离
stpzhf的博客
09-05 2235
使用css 方式解决 (这种还是比较常用的 在一个列表页面或者 底部定位按钮的时候不设置安全区域就会影响系统底部操作)第一种使用js方式解决。
uniapp app到顶部的距离
01-21
在 UniApp 中，可以通过 `onPageScroll` 生命周期函数来监听页面的滚动事件并获取当前页面相对于顶部的距离。此方法适用于所有基于 Vue 的组件。 当页面发生滚动时会触发该函数，并传入对象参数，其中包含页面在...
uniapp项目app设置安全距离
03-14
### 如何在 UniApp 中设置安全边距或安全区域 insets 为了确保应用程序能够在不同设备上正常显示，尤其是针对带有刘海屏的苹果设备，在 UniApp 项目中可以通过 CSS 的 `env()` 或者现代浏览器支持的 `constant()` ...
uni-app获取dom元素到顶部的距离以及操作dom元素的一些样式
m0_46588330的博客
09-30 1434
从信息通知跳转到另一个页面的评论专区 消息通知页面中的点击跳转 var that = this; const query = uni.createSelectorQuery().in(that); query.select('#tab_1').boundingClientRect(data => { // console.log("得到布局位置信息" + JSON.stringify(data)); console.log("节点离页面顶部的距离为1---" + data.
uniapp获取手机屏幕顶部和底部的安全区域（例如iPhone的刘海屏）
qq_52520278的博客
11-22 1194
好了，现在我们就能成功的获取到安全区域了，这样就是可以做样式适配了。打印得到的结果：（下图机型为iPhone15ProMax）现在切换一下机型再尝试一下：（切换为iPhoneX）上面图片的打印结果就是我们得到的该机型的安全区域。uniapp有这么一个方法。
uni-app 小程序中的定位问题 以及 页面安全距离
最新发布
halo1416的博客
04-25 691
safeAreaInsets 安全距离：主要指的是在全面屏手机（如 iPhone X 及以上型号）上，屏幕顶部和底部为了容纳刘海屏或前置摄像头而预留的安全区域。在首页（父组件）中获取到要高亮元素的文职，并且传递给蒙层组件，然后在蒙层组件中通过定位将元素定位到指定位置。如果存在引导线，提示语等，基于高亮元素去定位，在不同机型（特别是比较老的机型）上可能以一点的便宜，但不会很大，定位的时候留足空间，不要重叠即可。写完成了自测才发现，emo~文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！
uni-app微信小程序-组件安全区适配
m0_68286491的博客
03-21 1217
可以使用uni.getSystemInfoSync()调用系统信息。你会发现小程序不同机型对自定义导航栏可能会存在一些遮挡。我们可以logo、标题等内容放在安全区域内。-- ...省略 -->动态设置addingTop数据就好了。// 获取屏幕边界到安全区域距离。-- 顶部占位 -->##各类手机机型适配。
uni-app底部安全距离
wankexinjiminfei的博客
04-24 3032
* 关于使用constant(safe-area-inset-bottom)、env(safe-area-inset-bottom) 会返回底部安全区的高度 两个方法都写，会自动选择能够生效的来使用 可以使用calc方法来计算，根据实际情况灵活使用 */
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值