脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → uni-app iPhonex底部安全

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

 更新时间：2023年07月10日 10:49:34   作者：小李不小  
这篇文章主要为大家介绍了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底部安全的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • ES6中的rest参数与扩展运算符详解

    ES6中的rest参数与扩展运算符详解

    rest参数和扩展运算符都是ES6新增的特性。下面这篇文章主要给大家介绍了关于ES6中rest参数与扩展运算符的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-07-07
  • Javascript脚本实现静态网页加密实例代码

    Javascript脚本实现静态网页加密实例代码

    这篇文章介绍了Javascript脚本实现静态网页加密实例代码，有需要的朋友可以参考一下
    2013-11-11
  • JS中使用正则表达式g模式和非g模式的区别

    JS中使用正则表达式g模式和非g模式的区别

    这篇文章给大家详细介绍了JS中使用正则表达式g模式和非g模式的区别，非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2017-04-04
  • 短视频(douyin)去水印工具的实现代码

    短视频(douyin)去水印工具的实现代码

    这篇文章主要介绍了市面上短视频(douyin)"去水印"的工具原来是这样实现的,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-03-03
  • echarts整合多个类似option的方法实例

    echarts整合多个类似option的方法实例

    这篇文章主要给大家介绍了关于echarts整合多个类似option的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-07-07
  • js实现简单div拖拽功能实例

    js实现简单div拖拽功能实例

    这篇文章主要介绍了js实现简单div拖拽功能的方法,实例分析了javascript针对div层拖拽的实现技巧,需要的朋友可以参考下
    2015-05-05
  • 兼容IE和FF的图片上传前预览js代码

    兼容IE和FF的图片上传前预览js代码

    上传前预览使用js实现还是比较cool的，同时还可以兼容IE和FF的能做到这一点已经相当不容易了，下面与大家一起分享下具体的实现，感兴趣的你可不要错过了哈
    2013-05-05
  • uniapp中解析markdown支持网页和小程序实现示例

    uniapp中解析markdown支持网页和小程序实现示例

    这篇文章主要为大家介绍了uniapp中解析markdown支持网页和小程序实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • javascript数据结构之二叉搜索树实现方法

    javascript数据结构之二叉搜索树实现方法

    这篇文章主要介绍了javascript数据结构之二叉搜索树实现方法,较为详细的分析了二叉搜索树的概念、原理与JavaScript实现二叉搜索树的方法,对于学习JavaScript数据结构具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • javascript实现控制的多级下拉菜单

    javascript实现控制的多级下拉菜单

    这篇文章主要介绍了javascript实现控制的多级下拉菜单，包含示例代码，效果非常不错，这里推荐给大家。
    2015-07-07

最新评论