javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > uni-app iPhonex底部安全

uni-app的iPhonex底部安全区域解决方案

作者:小李不小

这篇文章主要为大家介绍了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底部安全的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文