目录 前言 方法一 方法二 前言 关于这个iPhone X底部安全区域问题,这个一直困扰了我好久,前前后后因为这个提交了好多次代码也在网上找了好多解决方案,今天我在这儿简单总结一下
目录
- 前言
- 方法一
- 方法二
前言
关于这个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底部安全的资料请关注自由互联其它相关文章!