uni-app的iPhonex底部安全区域解决方案
更新时间：2023年07月10日 10:49:34 作者：小李不小
这篇文章主要为大家介绍了uni-app的iPhonex底部安全区域解决方案示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
前言
关于这个iPhone X底部安全区域问题，这个一直困扰了我好久，前前后后因为这个提交了好多次代码也在网上找了好多解决方案，今天我在这儿简单总结一下，一来也方便自己以后查笔记，二来也希望方便后来人，我的终究目标是愿世界上永远没有难解决的bug，哈哈哈当然是开玩笑的，言归正传，下面就给大家来介绍几种解决iPhone X底部安全区域的问题。
方法一
mainfest.json 文件 app-plus 节点下配置 safearea
"safearea": {
"background": "#CCCCCC",
"bottom": {
"offset": "auto"
}
}
//以上代码意思设置安全区域居中，设置颜色为灰色为（#CCCCCC）方法二
或者mainfest.json 文件 app-plus 节点下配置 safearea，具体代码如下：
"safearea": {
"bottom": {
"offset": "none"
}
}
//以上代码意思为不使用原生占位然后具体的页面可以以如下方式配置
html部分
<view class="iphonex"></view> //该view标签为该页面最大的盒子
css部分
.iphonex{
/* iphonex 等安全区设置，底部安全区适配 */
/* #ifndef APP-NVUE */
margin-bottom: 0;
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
/* #endif */
}或者css部分为如下代码：
.iphonex{
/* iphonex 等安全区设置，底部安全区适配 */
/* #ifndef APP-NVUE */
margin-bottom: 0;
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
/* #endif */
}以上两种CSS编写方式可以根据具体需求自行选择
我们这里还可以用另一种不同的方法，来解决上述问题：
html部分
<view>
<view class="iphonex"></view>
</view>
//带有iPhoneX的class类放在页面最底部css部分
.iphonex{
/* iphonex 等安全区设置，底部安全区适配 */
/* #ifndef APP-NVUE */
height: 0;
height: constant(safe-area-inset-bottom);
height: env(safe-area-inset-bottom);
width: 750rpx;
background-color: #FFFFFF;
/* #endif */
}多的我不用说了,我就说说background-color,它可以配置你喜欢的颜色(主题色)相对灵活
以上就是uni-app的iPhonex底部安全区域解决方案的详细内容，更多关于uni-app iPhonex底部安全的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了element日历组件只显示月和日如何把年份隐藏掉的操作方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
这篇文章主要为大家介绍了Cropper.js进阶之固定宽高图片裁切实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。本文给大家介绍BootStrap组件之辅组类与响应式工具，感兴趣的朋友一起学习吧2016-04-04
本篇文章主要是对javascript在Google IE中的调试技巧进行了介绍，需要的朋友可以过来参考下2016-11-11
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
下面小编就为大家带来一篇页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
使用JavaScript实现一个简单的待办事项列表todo-list
这篇文章主要为大家详细介绍了如何使用JavaScript实现一个简单的待办事项列表todo-list,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下2024-04-04
javascript判断元素存在和判断元素存在于实时的dom中的方法
本文主要介绍了javascript判断元素存在和判断元素存在于实时的dom中的方法。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要为大家详细介绍了微信小程序实现侧边栏二级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
今天小编就为大家分享一篇layui表格 列自动适应大小失效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章给大家分享了JS中完美解析数据的方法和技巧，对此有兴趣的朋友可以参考学习下。2018-03-03
最新评论