小程序底部安全距离（直接用）

最新推荐文章于 2025-03-05 21:08:14 发布
最新推荐文章于 2025-03-05 21:08:14 发布
阅读量408 收藏 1
点赞数 3
文章标签： uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77875326/article/details/140038767
版权

  .safe-area-inster-bottom{
    height: env(safe-area-inset-bottom);
  }

木子尘淋
关注
微信小程序 - iphone适配底部安全距离
qq_50541792的博客
04-28 1399
基础库 2.20.1 开始支持，低版本需做兼容处理。小程序插件：支持，需要小程序基础库版本不低于2.21.3微信 Windows 版：支持微信 Mac 版：支持在这里放一下api地址用到的参数属性类型说明pixelRationumber设备像素比safeAreaObject在竖屏正方向下的安全区域。部分机型没有安全区域概念，也不会返回 safeArea 字段，开发者需自行兼容number安全区域右下角纵坐标number屏幕高度，单位pxnumber可使用窗口宽度，单位px。
【微信小程序】底部有安全距离，适配iphone X等机型的解决方案
Minf的博客
07-30 4748
微信小程序开发常常需要适配机型问题，如iPhoneX/XR等机型，底部有黑色横杠（称为安全距离），这时如果直接加css样式。能计算出安全距离，我想到一个通用的写法，具体做法是将页面高度。是不行的，不会计算底部安全距离，而会与之重叠。的高度限制为屏幕高度减去安全距离，代码实现是。经过搜索后，我们知道。...
微信小程序自动计算底部安全距离
夏夜追凉丶的博客
06-29 1865
微信小程序自动计算底部安全距离
微信小程序开发 中 “安全区域“
ultramand的博客
03-05 470
随着手机屏幕的多样化，尤其是iPhone X等带有刘海屏或底部操作区域的手机，开发者需要确保小程序的内容不会被这些系统组件遮挡。因此，微信小程序提供了一些API和CSS样式规则来帮助开发者适配这些特殊屏幕。在微信小程序开发中，"安全区域"是指在小程序页面中，不会被系统组件（如状态栏、标题栏、iPhone X 系列的刘海屏等）遮挡的可视区域。开发者应该根据获取到的安全区域信息来调整小程序页面的布局，确保内容不会被遮挡。例如，可以通过设置页面的。使用上述CSS，可以确保页面内容不会被状态栏和底部操作区域遮挡。
uniapp 微信小程序，底部安全距离适配，针对安卓iPhone不同型号手机
Esther_liew的博客
08-21 1383
微信小程序 底部安全距离适配
小程序适配底部安全距离（小黑条）
weixin_45762162的博客
10-10 561
对于支持CSS环境函数的设备，可以使用env()和constant()来适配底部安全距离。老生常谈的问题了，直接上代码。
设置小程序底部安全距离
O_O_______的博客
06-01 499
【代码】设置小程序底部安全距离。
微信小程序 - 自定义底部菜单栏
觉醒法师的专栏
08-07 7475
微信小程序底部菜单栏是可以通过自定义来实现的。主要涉及：新建组件、编写组件代码、设置样式、配置导航栏、在页面中引用。自定义底部导航栏可以创建出符合项目设计需求效果，实现个性化的页面切换功能。
微信小程序自定义底部导航栏
weixin_62980497的博客
05-31 396
可获取到底部导航栏高度，存在app全局变量中，其他页面有特殊需求需要动态计算页面高度时可能需要用到此属性。微信小程序自定义底部导航栏，原生实现，不包含其他任何第三方组件，比较干净，开箱即用。可自定义是否添加中间的大图标菜单，当然也可自定义大图标的默认与激活样式。解决点击导航菜单时，激活的菜单貌似并不同步的问题。可自定义每个菜单的默认、激活后的图标和文字样式。可自定义激活动画，默认这个心跳过渡动画。底部根据是否有安全距离自动调整。可自定义底部导航栏列表样式。不废话，直接贴上完整源码。
微信小程序适配iphoneX，XR，12的底部安全区域（底部小黑条）
summer_my_sunshine的博客
08-03 7494
问题描述： 在项目页面开发过程中，有些页面的按钮是需要固定在页面底部的（比如电商项目的确认订单页）；如果直接设置bottom:0，那么在iphonex，xr，12等机型，就会出现下面左图的问题，按钮区域距离底部太近了，用户体验就会很差，按钮也不好点击。 解决思路： 为了适配所有的手机机型，我们需要获取到底部小黑条的高度，给固定在底部的view设置padding-bottom，增加高度；（有些手机默认是没有底部这个区域的，没有的话padding-bottom就设置为0） 解决方法： 1.首先，..
小程序对IPhone全面屏手机底部黑线的安全区域处理
weixin_45815859的博客
05-02 3549
今天在对自己写的小程序项目进行优化时发现 全面屏手机拥有底部黑线时候 在app.js内定义的tabbar不会受到影响 但是在部分页面内自己手写的底部tabbar会被黑线挡住内容 立马去查了下API。发现了其中一种解决方式 话不多说 贴代码 如果还有其他更优的方法 欢迎留言或者私信（第一次发博客有点害羞羞） 1、安全区域 首先先了解一下安全区域，安全区域指的是一个可视窗口范围，处于安全区域的内...
小程序根据手机机型设置自定义底部导航距离
10-16
主要为大家详细介绍了小程序根据手机机型设置自定义底部导航距离，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序 iPhoneX底部安全区域（底部小黑条）适配(一分钟解决)
10-16
iPhone X 对于微信小程序的tabbar来说，会被底部小黑条覆盖，需要处理，大概思路是，得到手机型号、分别判断样式。这篇文章主要介绍了微信小程序 iPhoneX底部安全区域（底部小黑条）适配问题,需要的朋友可以参考下
小程序设置底部安全距离
qq_48795670的博客
08-25 5268
都是用于设置底部安全距离的CSS属性值，但它们的使用方式和适用环境略有不同。具体使用哪个取决于您所使用的环境或框架的要求。函数是CSS的通用函数，可以在任何支持的环境中使用。因此，在不同的环境或框架中，这两个函数的使用方式可能会有所不同。是CSS的一个属性值，用于设置底部安全距离。它表示一个固定的值，可以直接使用具体的像素值来设置。都是CSS中的属性值，用于在小程序中设置底部安全距离。函数是WebKit的CSS函数，用于在小程序中设置底部安全距离。元素的底部padding设置为底部安全距离的值。
小程序适配底部安全距离
一些平时在开发过程中遇到的常见问题，分享给大家
01-15 648
小程序适配底部安全距离
全局设置小程序底部安全距离
qq_48795670的博客
08-25 1093
通过以上步骤，您已经成功地在全局设置了底部安全距离，而无需在每个页面中单独添加。这样，所有页面的底部都将具有相同的底部安全距离。要在全局设置底部安全距离，而不是在每个页面中添加，您可以通过修改小程序的全局样式文件来实现。打开小程序的代码库，并找到全局样式文件。通常情况下，该文件位于小程序的根目录下，命名为。
小程序底部安全距离
weixin_59813475的博客
01-09 134
底部安全距离padding-bottom: env(safe-area-inset-bottom);
微信小程序移动端安全距离
weixin_47756693的博客
07-13 366
【代码】微信小程序移动端安全距离。
微信小程序 ---- iPhone X 以上机型留出底部安全距离
m0_56860190的博客
03-10 1907
小程序自适应底部距离
uniapp 获取小程序顶部高度
最新发布
03-08
<think>好的，我现在需要回答用户关于如何在uni-app中获取小程序顶部高度的问题。首先，我得回忆一下uni-app的相关API和常见方法。用户提到的是小程序，所以可能需要针对微信小程序的解决方案。 首先，我记得在uni-app中，可以使用uni.getSystemInfoSync()来获取系统信息。这个接口返回的信息包括状态栏的高度，也就是statusBarHeight。但用户问的是顶部高度，可能是指整个导航栏的高度，包括状态栏和标题栏部分。 接下来，我需要确定导航栏的高度。通常情况下，导航栏的高度是状态栏高度加上标题栏的高度。在微信小程序中，标题栏的高度通常是固定的，比如44px，但可能不同机型会有差异？或者是否有其他方式动态获取？ 不过，可能更准确的方式是使用uni.getMenuButtonBoundingClientRect()来获取胶囊按钮的位置信息。这个接口返回胶囊按钮的top、bottom等位置信息，结合状态栏高度，可以计算出导航栏的高度。 具体步骤可能是这样的：首先通过uni.getSystemInfoSync()获取statusBarHeight，然后通过uni.getMenuButtonBoundingClientRect()得到胶囊按钮的位置，例如top值。然后导航栏的总高度应该是胶囊按钮的top（相对于顶部的距离）加上胶囊按钮的高度的一半，或者具体计算方式可能需要根据实际情况调整。 比如，在微信小程序中，导航栏高度一般为：胶囊按钮的top（到顶部的距离）加上胶囊按钮的height的一半？或者需要结合statusBarHeight。这时候可能需要查一下官方文档或者常见的实现方法。 或者，导航栏的高度等于胶囊按钮的bottom（胶囊底部到顶部的距离）加上胶囊按钮的top减去状态栏高度？或者可能有其他计算方式。这个时候需要确保公式的正确性。 假设胶囊按钮的top是到状态栏底部的距离，那么整个导航栏的高度应该是statusBarHeight + 胶囊按钮的top + 胶囊按钮的高度？或者可能需要不同的组合。我需要验证这个逻辑。 例如，在微信小程序中，常见的导航栏高度计算方法是：胶囊按钮的上边界位置（top）加上胶囊按钮的高度，然后再加上状态栏的高度？或者可能不是。比如，如果胶囊按钮的top是相对于整个窗口顶部的距离，那么statusBarHeight是状态栏的高度，所以导航栏的高度可能是胶囊按钮的top的2倍加上胶囊按钮的高度？或者这个可能需要具体的数据来验证。 这时候可能需要举一个例子：假设状态栏高度是20px，胶囊按钮的top是48px，height是32px。那么导航栏的高度可能是48 + 32 = 80px？或者加上状态栏的高度20，总高度是20+48+32？这可能不正确，因为top可能已经包括了状态栏的高度。比如，在微信小程序中，胶囊按钮的top是相对于整个窗口顶部的，所以如果状态栏高度是20，胶囊按钮的top是20+导航栏标题区域的高度？这时候可能需要更仔细的分析。 可能正确的计算方式是：导航栏总高度 = (胶囊按钮的top - statusBarHeight) * 2 + 胶囊按钮.height。例如，假设胶囊按钮的top是30px，statusBarHeight是20px，那么标题栏的高度部分是（30-20）*2 + 胶囊按钮的height？这似乎是一个常见的计算方式，可能来源于微信小程序的官方推荐方法。 所以，总结步骤： 1. 获取系统信息，得到statusBarHeight。 2. 获取胶囊按钮的信息，得到其top、height等。 3. 计算导航栏高度：胶囊按钮.top - statusBarHeight得到的是标题栏部分的高度？或者需要乘以2？比如，在微信小程序中，胶囊按钮的top是标题栏底部的位置，所以整个标题栏的高度是胶囊按钮.top - statusBarHeight，然后加上胶囊按钮的高度的一半？ 或者，正确的计算方式是：导航栏高度 = 胶囊按钮.top + 胶囊按钮.height + 间隙。例如，在微信官方文档中，可能有这样的计算方式：自定义导航栏高度 = (胶囊按钮.top - 状态栏高度) * 2 + 胶囊按钮.height。或者类似这样的计算。 这个时候，我需要查阅相关资料，确保这个计算方式的正确性。例如，网上常见的解决方案是： 在微信小程序中，导航栏高度计算公式为： const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); const navBarHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height; 这可能是因为胶囊按钮的位置是相对于整个窗口顶部的，减去状态栏高度得到的是标题栏区域的高度，然后乘以2是因为可能存在上下边距，再加上按钮本身的高度。这可能得到一个完整的导航栏高度，包括状态栏和标题栏的总高度？ 或者可能导航栏的高度是状态栏高度加上标题栏的高度，而标题栏的高度计算为 (胶囊按钮.top - statusBarHeight) * 2 + 胶囊按钮.height。例如，假设胶囊按钮的top是距离窗口顶部的距离，那么胶囊按钮.top减去状态栏高度就是标题栏的可用空间，可能乘以2是因为上下边距，再加上按钮高度，得到标题栏的高度，再加上状态栏的高度，得到整个导航栏的高度？ 这个时候可能需要更详细的公式。例如： 状态栏高度（statusBarHeight） + 标题栏高度（标题栏高度 = (胶囊按钮.top - statusBarHeight) * 2 + 胶囊按钮.height） 或者可能标题栏的高度是 (胶囊按钮.top - statusBarHeight) * 2 + 胶囊按钮.height，而整个导航栏的高度是标题栏高度 + statusBarHeight？ 例如，假设胶囊按钮的top是40px，状态栏高度是20px，那么标题栏的高度是（40 - 20）*2 + 32（假设胶囊按钮高32）= 20*2 +32=72。整个导航栏高度是20 +72=92px？ 这可能与实际不符，可能需要验证。或者可能标题栏的高度已经是包括在胶囊按钮的top中的？ 这个时候可能需要举实例。例如，假设在某个设备中，状态栏高度是20px，胶囊按钮的top是48px，height是32px。根据上述公式，标题栏的高度是（48-20）*2 +32= 28*2+32= 56+32=88px。加上状态栏20，总导航栏高度是108px？这似乎可能过高，但实际可能如此。 不过，也有可能计算方式不同。例如，导航栏的总高度是胶囊按钮.bottom + 胶囊按钮.top - statusBarHeight。或者别的组合。 这个时候可能需要参考uni-app的官方文档或者微信小程序的文档。例如，微信小程序中的导航栏自定义部分，开发者需要计算导航栏的高度，通常的做法是获取胶囊按钮的位置信息，然后结合状态栏高度进行计算。 根据uni-app的文档，uni.getMenuButtonBoundingClientRect()可以获取胶囊按钮的位置信息。因此，在uni-app中的代码大致如下： 在onLoad或者created生命周期中： const systemInfo = uni.getSystemInfoSync(); const statusBarHeight = systemInfo.statusBarHeight; const menuButtonInfo = uni.getMenuButtonBoundingClientRect(); // 计算导航栏高度 const navBarHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height; // 总高度包括状态栏和导航栏 const totalNavHeight = statusBarHeight + navBarHeight; 或者，可能不需要乘以2，而是直接计算标题栏的高度为 menuButtonInfo.top + menuButtonInfo.height，但这样可能没有考虑到padding？ 这时候可能需要查阅实际项目中的常见做法。例如，很多资料中提到的导航栏高度计算方式确实是（胶囊按钮的top - 状态栏高度）* 2 + 胶囊按钮的高度。这可能是因为胶囊按钮的位置距离状态栏底部有一定的间距，而乘以2是因为上下边距相等？ 例如，假设胶囊按钮的top为30px，状态栏高度为20px，那么30-20=10px，这可能是胶囊按钮距离状态栏底部的上边距。那么标题栏的高度可能为10px上边距 + 按钮高度32px + 10px下边距 = 52px。这样总标题栏高度是52px，整个导航栏高度是状态栏20 + 标题栏52=72px。但根据上述公式，是(30-20)*2 +32= 20 +32=52，和这个例子一致。所以，标题栏的高度是52px，加上状态栏20，总导航栏高度为72px。 所以，在代码中，导航栏的总高度为状态栏高度加上标题栏的高度，而标题栏的高度是计算出来的（胶囊按钮.top - statusBarHeight）*2 + 胶囊按钮.height。 所以，综合起来，用户需要获取小程序的顶部高度（导航栏高度），可以按照以下步骤： 1. 使用uni.getSystemInfoSync()获取statusBarHeight。 2. 使用uni.getMenuButtonBoundingClientRect()获取胶囊按钮的信息，包括top、height等。 3. 计算标题栏高度：(menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height。 4. 导航栏总高度：statusBarHeight + 标题栏高度。 或者，如果用户只需要导航栏部分的高度（不包含状态栏），可能只需要标题栏的高度。需要根据用户的具体需求来确定。 不过，用户的问题可能更直接，比如需要设置自定义导航栏时，需要知道整个导航栏的高度，包括状态栏和标题栏，这时候总高度就是上述计算的statusBarHeight + 标题栏高度。 所以，最终的代码示例可能是： // 获取系统信息 const systemInfo = uni.getSystemInfoSync(); // 状态栏高度 const statusBarHeight = systemInfo.statusBarHeight || 0; // 获取菜单按钮（胶囊）的位置信息 const menuButtonInfo = uni.getMenuButtonBoundingClientRect(); // 计算导航栏高度 const titleBarHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height; const navBarHeight = statusBarHeight + titleBarHeight; console.log('导航栏总高度:', navBarHeight); 不过，需要注意在微信小程序中，uni.getMenuButtonBoundingClientRect()可能仅在微信小程序中有效，其他平台可能不支持。因此，需要考虑跨平台兼容性。如果用户只在微信小程序中使用，那么没问题。否则可能需要条件编译。 另外，某些情况下，statusBarHeight可能不存在于某些平台，所以需要处理默认值。 最后，建议用户将这段逻辑封装成一个函数或者使用uni-app的CSS变量来处理，方便使用。</think>在 uni-app 中获取小程序的顶部导航栏高度（包括状态栏和标题栏），可以通过以下步骤实现： --- ### **1. 核心原理** - **状态栏高度**：通过 `uni.getSystemInfoSync().statusBarHeight` 获取。 - **标题栏高度**：通过胶囊按钮的位置信息计算得出（公式：`(胶囊按钮上边距 - 状态栏高度) * 2 + 胶囊按钮高度`）。 --- ### **2. 完整代码** ```javascript // 获取系统信息 const systemInfo = uni.getSystemInfoSync(); // 状态栏高度（如：20px） const statusBarHeight = systemInfo.statusBarHeight || 0; // 获取小程序胶囊按钮的位置信息 const menuButtonInfo = uni.getMenuButtonBoundingClientRect(); // 计算标题栏高度（不包含状态栏） const titleBarHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height; // 导航栏总高度 = 状态栏高度 + 标题栏高度 const navBarHeight = statusBarHeight + titleBarHeight; console.log('导航栏总高度:', navBarHeight); ``` --- ### **3. 代码解释** 1. **获取系统信息** `uni.getSystemInfoSync()` 返回设备信息，其中 `statusBarHeight` 是状态栏高度（如 iPhone 顶部的时间、电量栏）。 2. **获取胶囊按钮信息** `uni.getMenuButtonBoundingClientRect()` 返回胶囊按钮的位置和尺寸，包含 `top`（到屏幕顶部的距离）、`height`（高度）等属性。 3. **计算标题栏高度** - `menuButtonInfo.top - statusBarHeight`：胶囊按钮到状态栏底部的距离（即标题栏的上边距）。 - 乘以 2 是因为胶囊按钮通常上下对称，再加上按钮自身高度，得到完整的标题栏高度。 4. **总高度** 最终导航栏高度为状态栏高度与标题栏高度之和。 --- ### **4. 应用场景** - 自定义导航栏时，设置页面内容区域向下偏移 `navBarHeight`。 - 动态适配不同机型，避免内容被顶部导航栏遮挡。 --- ### **5. 注意事项** - **平台差异**：此方法主要针对微信小程序，其他平台（如 H5）需兼容处理。 - **安全区域**：部分全面屏设备底部可能有安全区域，建议结合 `safeAreaInsets` 处理。 --- 通过上述方法，你可以精准获取小程序顶部导航栏高度，实现更灵活的布局适配。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值