uni-app - 刘海屏(Iphone X)底部横杠(——)白色区域块（安全距离处更改颜色）解决方案

た入场券 2022-12-25 13:54 907阅读 0赞

## 前言 ##

> 场景：因为要做无 `tabbar` 页面，所以在配置文件中取消底部导航栏。

取消后，`iPhone X(刘海屏)` 底部就出现如下图所示白色安全区域问题：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70]  
这个问题，是因为 `uni-app` 默认会为 `iPhone X(刘海屏)` 留出安全距离，这个 **安全距离的背景色就是白色。** 所以，如果你将页面颜色设置为其他颜色，就会与默认白色冲突。

> 有 2 个不同的解决方案(原生占位)，虽然原理是一样，但使用的场景不同，请根据您的需求来采纳。

## 一、自动适应（推荐） ##

将所有 `iPhone X（刘海屏)` 底部安全区域背景颜色 **自动适应**，当前页面什么颜色会自动调整。

1.  打开 `manifest.json` ，打开源码视图：  
    ![在这里插入图片描述][20201202115020128.png]
2.  找到 `app-plus` 配置项，添加以下代码：

"safearea": { 
      "bottom": {   
            "offset": "none" 
        }   
    }

1.  正确配置成功如下图所示：  
    ![在这里插入图片描述][20201202115210569.png]

## 二、统一设置 ##

将所有 `iPhone X（刘海屏)` 底部安全距离的背景色，**统一设置** 为一种颜色：

1.  打开 `manifest.json` ，打开源码视图：  
    ![在这里插入图片描述][20201202115020128.png]
2.  找到 `app-plus` 配置项，添加以下代码：

"safearea": {   
        "background": "#CCCCCC", //背景色
        "bottom": {   
            "offset": "auto"  
        }  
    }

1.  正确配置成功如下图所示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70]: /images/20221120/3eb64d1d5b7040c5bf6c471e59c858d3.png
[20201202115020128.png]: /images/20221120/986bca2d74c54579add0669953b75c8c.png
[20201202115210569.png]: https://img-blog.csdnimg.cn/20201202115210569.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/202012021228382.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ==,size_16,color_FFFFFF,t_70