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底部安全的资料请关注好吧啦网其它相关文章！