uni-app - 劉海屏(Iphone X)底部橫杠(——)白色區域塊（安全距離處更改顏色）解決方案

前言

場景：因為要做無 tabbar 頁面，所以在配置文件中取消底部導航欄。

取消后，iPhone X(劉海屏) 底部就出現如下圖所示白色安全區域問題：

這個問題，是因為 uni-app 默認會為 iPhone X(劉海屏) 留出安全距離，這個 安全距離的背景色就是白色。 所以，如果你將頁面顏色設置為其他顏色，就會與默認白色沖突。

有 2 個不同的解決方案(原生占位)，雖然原理是一樣，但使用的場景不同，請根據您的需求來采納。

一、自動適應（推薦）

將所有 iPhone X（劉海屏) 底部安全區域背景顏色 自動適應，當前頁面什么顏色會自動調整。

1. 打開 manifest.json ，打開源碼視圖：
   
2. 找到 app-plus 配置項，添加以下代碼：

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

 

3. 正確配置成功如下圖所示：
   

二、統一設置

將所有 iPhone X（劉海屏) 底部安全距離的背景色，統一設置 為一種顏色：

1. 打開 manifest.json ，打開源碼視圖：
   
2. 找到 app-plus 配置項，添加以下代碼：

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

3. 正確配置成功如下圖所示：