uniapp h5 tabBar兼容IOS手机底部黑线

原创 已于 2023-02-28 17:26:04 修改 · 3.4k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ios #uni-app

于 2023-02-23 17:52:52 首次发布
文章主要讨论了在uniapp开发中遇到的iOS设备底部出现黑线的问题，以及如何通过设置`padding-bottom:constant(safe-area-inset-bottom)`和`padding-bottom:env(safe-area-inset-bottom)`来解决这个问题。同时，文章提供了自定义tabBar的方案，包括在pages.json中配置，隐藏原生tabBar，创建自定义组件，并应用safe-area-inset-bottom进行兼容性适配。

uniapp 兼容IOS手机底部黑线 IOS苹果手机有很多款手机底部都有一条黑线。底部的tabbar 导航栏如果遇到IOS手机则会出现问题。 因为我这边的tabbar导航栏是自己写的，不是用的uniapp自带的，所以如果遇到IOS手机底部有黑线的这种，需要将tabbar导航栏的高度调整一下才可以。 除此之外还有些页面，底部有个按钮之类的，也是需要做兼容处理的。

在这里插入图片描述

uni-app：iPhone的底部安全区域

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
uni.getSysteminfo({
  success: res => {
    let safeArea = res.safeAreaInsets.bottom;
  }
})

该APi返回一个对象，包含 top right bottom left width height，其中bottom为安全区域高度

对应的兼容情况如下，uni-app的版本2.5.3+使用safeAreaInsets值

safeArea 在竖屏正方向下的安全区域 App、H5、微信小程序
safeAreaInsets 在竖屏正方向下的安全区域插入位置（2.5.3+） App、H5、微信小程序

uniapp自定义tabBar方案

一、pa

最低0.47元/天 解锁文章
uni-app适配ios底部黑色条
L_C_sunny的博客
02-20 777
【代码】uni-app适配ios底部黑色条。
uni-app - 刘海屏(Iphone X)底部横杠(——)白色区域块（安全距离处更改颜色）解决方案
热门推荐
🏆 前端领域优质创作者
12-02 1万+
场景：因为要做无tabbar页面，所以在配置文件中取消底部导航栏。取消后，iPhoneX(刘海屏)底部就出现如下图所示白色安全区域问题：这个问题，是因为uni-app默认会为iPhoneX(刘海屏)留出安全距离，这个安全距离的背景色就是白色。所以，如果你将页面颜色设置为其他颜色，就会与默认白色冲突。有2个不同的解决方案(原生占位)，虽然原理是一样，但使用的场景不同，请根据您的需求来采纳。
【移动端应用开发】 以 uniapp 打包成 APP 或小程序后或 H5 后 IOS（iphoneX 机型）底部安全区域适配（避开底部黑条虚拟键）
菜狗小测试
01-22 3606
在使用 uniapp 进行应用开发时，可能会遇到应用在 iPhone X 等带有底部安全区域的机型上显示不正常的问题。这是因为 iPhone X 及之后的机型采用了全面屏设计，屏幕底部有一个黑色的虚拟键区域，俗称"刘海"或"黑条"。在 iOS 系统中，底部安全区域的高度是由系统动态计算的，具体高度会根据不同的机型和屏幕方向而变化。因此，在进行适配时，需要动态获取底部安全区域的高度，并根据高度调整应用内容的布局。这将在 iPhone X 及之后的机型上，为页面的底部添加一个内边距，以避开底部安全区域。
uniapp_tabbar_safearea
最新发布
weixin_47873655的博客
11-14 673
UniApp H5 TabBar安全区适配终极方案，通过四层保护实现100%全平台兼容：1）在index.html设置viewport-fit=cover；2）App.vue全局CSS使用env(safe-area-inset-bottom)；3）JS自动检测不支持env()时fallback到34px；4）为TabBar添加safe-area-bottom类。该方案完美适配iPhone刘海屏、iOS Safari、微信浏览器、抖音WebView等多种环境，确保TabBar在任何设备上都不会被安全区遮挡。
uniapp 兼容IOS手机底部黑线（iphone 10以上均有的黑线）亲测有效
yehaocheng520的博客
11-27 8888
uniapp 兼容IOS手机底部黑线 IOS苹果手机有很多款手机底部都有一条黑线。 app底部的tabbar 导航栏如果遇到IOS手机则会出现问题。 因为我这边的tabbar导航栏是自己写的，不是用的uniapp自带的，所以如果遇到IOS手机底部有黑线的这种，需要将tabbar导航栏的高度调整一下才可以。 除此之外还有些页面，底部有个按钮之类的，也是需要做兼容处理的。如下： 解决办法如下： 三行代码搞定： 第一种办法：通过padding-bottom赋一个安全值 可以通过padding-botto
uniapp小程序，适配苹果底部黑条虚拟键，适配安全区域
qq_59572992的博客
06-14 5796
uniapp小程序，适配苹果底部黑条虚拟键，适配安全区域
H5底部tabbar模板，基于vant组件库及使用最新脚手架搭建
08-25
基于vue开发H5，使用vant的UI组件开发界面，该简单模板 1. px自动转化响应式rem单位。更容易更高效开发，像素级还原设计稿； 2. axios请求封装； 3. 使用vuex管理底部tabbars的数据，实现权限控制； 4. 下拉刷新，加载更多示例； 5. 使用上下布局，实现局部更新，支持显示隐藏标题，底部tabbars更新；
精选资源
uniapp自定义tabbar图标样式
10-13
在移动应用开发领域，uniAPP是一个非常流行的框架，它允许开发者使用一套代码库来构建多平台的应用，包括iOS、Android以及H5等。本话题主要关注如何在uniAPP中自定义tabbar的图标样式，这对于提升应用的用户体验和...
uniapp - [全端兼容] 高性能 tabbar 底部菜单凸起效果，原生系统自定义底部菜单不卡顿、切换页面不闪烁、自动缓存页面（底部菜单中间自定义一个图片并悬浮起来）
🏆 前端领域优质创作者
06-28 1万+
uniapp如何实现底部凸起按钮，uniapptabbar底部菜单怎么自定义，uniapp怎么让底部菜单中间突出来，uniapp自定义底部tabbar，uniapp高性能好用的底部菜单，uniapp自定义底部导航栏并解决闪烁问题，uniapp怎么设置凸起的底部tabbar，uniapp怎么用系统的底部菜单还想让中间的按钮凸起来，uniapp自定义tabbar性能不好怎么办，uni-app自定义导航栏实现中间凸起效果，uniapp底部导航栏中间圆形按钮凸起效果详细代码，uni-app自定义中间图标突起的
uniapp打包h5后tabBar图片不正常显示
苦夏木禾
02-27 571
使用uniapp制作h5后，底部tabBar的图片一会正常显示一会不正常。
uniapp 自定义tabbar
优快云博客专家，系统架构师，有合作、疑惑请私信博主。
07-21 2539
uniapp 自定义tabbar，uniapp 自定义tabbar源码，uniapp添加多个tabbar,uniapp 自定义tab,uniapp tab
uni-app 苹果手机底部安全区域的适配问题
UserGuan的博客
09-23 4639
cursor-spacing：指定光标与键盘的距离(单位 px)。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离。特性来解决，不需要自己动态计算高度，只需将如下 CSS 代码添加到样式中即可。使用获取的 bottomPadding 字段来设置光标与键盘的距离。无法解决如果底部区域是输入框，苹果手机的输入法会把输入框遮挡问题。可解决如果底部区域是输入框，苹果手机的输入法会把输入框遮挡问题。解决办法：利用 IOS 新增的。获取系统信息接口方法。
uni-app 适配苹果底部横线
www569006806的博客
05-30 1892
uni-app 适配苹果底部横线 1、使用css计算函数 page{ padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */ } 效果： 2、获取设备信息通过计算出底部高度 wx.getSystemInfo({ success: res => {
【H5】底部tabbar按钮切换图标高亮显示
疾术客
08-05 1270
html <div class="notice_bottom_tabbarboxs"> <div class="notice_bottom_tabbarboxs_itemboxs" img='img/sicon1.png' data-img='img/sicon01.png'> <img class="notice_bottom_tabba...
uniapp做app ios底部小黑条区域适配
weixin_72661733的博客
12-18 827
在manifest.json。找到 app-plus。，添加以下代码就可以了。
uni-app实现自定义导航栏，兼容H5、App、微信小程序
为技术而生
03-12 1万+
uni-app实现自定义导航栏，兼容H5、App、微信小程序 很多情况下，系统自带的导航栏无法满足UI设计的要求，这时候就需要我们自定义导航栏来实现需求，要考虑跨端的多种情况，这里我们封装成一个组件来使用...
uni-app前端H5页面底部内容被tabbar遮挡
qq_44971069的博客
04-02 356
【代码】uni-app前端H5页面底部内容被tabbar遮挡。
解决uniapp在IOS系统H5页面底部留出安全区域问题。
weixin_42711805的博客
11-15 1525
在uniapp的template.h5.html加上meta标签viewport-fit=cover即可实现。
uni-app项目配置手机端底部的tab栏（一）
码上言
11-06 4704
一般我们在开发手机应用的时候都会有手机底部的tab导航栏，然而我们在使用uni-app开发的时候，我们可以直接在项目中配置tab即可，非常的方便。 1、创建项目 我们用uni-app官方提供的HBuilder X工具来创建项目，可在官网上下载HBuilder X工具， 下载好之后，不需要安装，直接运行即可。我们找到文件进行创建项目： 创...
uniapp h5 tabbar显示不全
03-16
### UniApp H5 平台 TabBar 显示不全解决方案 在开发过程中遇到 **TabBar 图片无法正常显示** 或者 **TabBar 被遮挡/显示不全** 的问题时，可以按照以下方法逐一排查并解决问题。 #### 1. 确认图片路径是否正确 如果 `tabBar` 中的图片未加载成功，需确认配置文件中的路径是否无误。通常情况下，`tabBar` 配置项位于项目的 `manifest.json` 文件中。以下是常见的配置方式： ```json { "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/images/home.png", // 默认状态图标 "selectedIconPath": "static/images/home-active.png" // 选中状态图标 } ] } } ``` 确保 `iconPath` 和 `selectedIconPath` 所指向的资源能够被项目访问到[^1]。 --- #### 2. 检查 CSS 样式冲突 当运行环境切换至 H5 平台时，可能会因为样式覆盖或者屏幕适配问题导致 `tabBar` 不完全展示。可以通过以下方式进行调整： - 添加全局样式的重置规则，防止外部框架干扰： ```css * { margin: 0; padding: 0; box-sizing: border-box; } /* 特殊处理 iPhone X 及以上设备的安全区域 */ html, body { height: 100%; overflow-x: hidden; } .tab-bar-container { position: fixed; bottom: 0; width: 100%; background-color: white; /* 设置背景颜色避免透明效果 */ } ``` 对于 iOS 设备底部安全区的支持，可利用 `env()` 函数动态计算高度差值[^2]: ```css .tab-bar-container { padding-bottom: env(safe-area-inset-bottom); } ``` 此设置会自动适应不同型号的 iPhone 底部圆角设计，从而避免因系统导航栏造成的视觉错位现象。 --- #### 3. 使用 API 获取设备参数 通过调用 `uni.getSystemInfoSync()` 方法获取当前设备的具体尺寸数据，并据此优化布局逻辑。例如，在初始化页面时执行如下代码片段来判断是否存在额外的空间需求： ```javascript const systemInfo = uni.getSystemInfoSync(); if (systemInfo.safeAreaInsets && systemInfo.safeAreaInsets.bottom > 0) { console.log('存在底部安全边距:', systemInfo.safeAreaInsets.bottom); } else { console.log('无需特殊处理'); } ``` 上述脚本可以帮助开发者了解目标终端是否有特殊的 UI 布局约束条件需要满足。 --- #### 4. 更新依赖库版本 部分旧版工具链可能未能妥善支持某些新特性（如 Safe Area），因此建议升级至最新稳定发行版后再尝试重现问题。具体操作步骤包括但不限于以下几个方面： - 升级 CLI 工具； - 替换基础组件模板； - 修改编译选项以启用实验性质的功能开关等。 注意：每次变更前务必做好备份工作以防意外丢失重要资料！ --- ### 总结 综上所述，针对 UniApp 在 H5 场景下发生的 TabBar 渲染异常状况可以从四个方面入手分析解决办法——验证素材链接有效性、审查前端表现层定义语句、借助原生接口探测硬件属性以及适时跟进官方文档指导完成必要的技术迭代过程。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码农键盘上的梦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值