快捷導(dǎo)航

uni-app的iPhonex底部安全區(qū)域解決方案

更新時(shí)間：2023年07月10日 10:49:34 作者：小李不小

這篇文章主要為大家介紹了uni-app的iPhonex底部安全區(qū)域解決方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

關(guān)于這個(gè)iPhone X底部安全區(qū)域問(wèn)題，這個(gè)一直困擾了我好久，前前后后因?yàn)檫@個(gè)提交了好多次代碼也在網(wǎng)上找了好多解決方案，今天我在這兒簡(jiǎn)單總結(jié)一下，一來(lái)也方便自己以后查筆記，二來(lái)也希望方便后來(lái)人，我的終究目標(biāo)是愿世界上永遠(yuǎn)沒(méi)有難解決的bug，哈哈哈當(dāng)然是開(kāi)玩笑的，言歸正傳，下面就給大家來(lái)介紹幾種解決iPhone X底部安全區(qū)域的問(wèn)題。

方法一

mainfest.json 文件 app-plus 節(jié)點(diǎn)下配置 safearea

"safearea": {  
    "background": "#CCCCCC",  
    "bottom": {  
        "offset": "auto"  
    }  
} 
//以上代碼意思設(shè)置安全區(qū)域居中，設(shè)置顏色為灰色為（#CCCCCC）

方法二

或者mainfest.json 文件 app-plus 節(jié)點(diǎn)下配置 safearea，具體代碼如下：

"safearea": {  
    "bottom": {  
        "offset": "none"  
    }  
}
//以上代碼意思為不使用原生占位

然后具體的頁(yè)面可以以如下方式配置

html部分

<view class="iphonex"></view>
//該view標(biāo)簽為該頁(yè)面最大的盒子

css部分

.iphonex{
        /* iphonex 等安全區(qū)設(shè)置，底部安全區(qū)適配 */
        /* #ifndef APP-NVUE */
        margin-bottom: 0;
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom);
        /* #endif */
    }

或者css部分為如下代碼：

.iphonex{
        /* iphonex 等安全區(qū)設(shè)置，底部安全區(qū)適配 */
        /* #ifndef APP-NVUE */
        margin-bottom: 0;
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom);
        /* #endif */
    }

以上兩種CSS編寫(xiě)方式可以根據(jù)具體需求自行選擇

我們這里還可以用另一種不同的方法，來(lái)解決上述問(wèn)題：

html部分

<view>
    <view class="iphonex"></view>
</view>
//帶有iPhoneX的class類(lèi)放在頁(yè)面最底部

css部分

    .iphonex{
        /* iphonex 等安全區(qū)設(shè)置，底部安全區(qū)適配 */
        /* #ifndef APP-NVUE */
        height: 0;
        height: constant(safe-area-inset-bottom);
        height: env(safe-area-inset-bottom);
        width: 750rpx;
        background-color: #FFFFFF;
        /* #endif */
    }

多的我不用說(shuō)了,我就說(shuō)說(shuō)background-color,它可以配置你喜歡的顏色(主題色)相對(duì)靈活

以上就是uni-app的iPhonex底部安全區(qū)域解決方案的詳細(xì)內(nèi)容，更多關(guān)于uni-app iPhonex底部安全的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: