uniapp解决全面屏幕iphonex底部安全区的问题

全面屏的安全区

这个问题是最近碰到的，那时项目比较急，没怎么细致处理。就修改了一下背景颜色，来弥补底部白色的色差冲突！这个情况是在全面屏手机下产生的，在这之前先要有个概念，叫安全区！上张图大家就能大致就能知道是个啥！

比如我们写一个简单的效果：

<template>
	<view class="box">
		<view>11</view>
		<view>11</view>
		<view>11</view>
		<view>11</view>
		<view>11</view>
		<view>11</view>
		<view>11</view>
		<view>11</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
		}
	}
</script>
<style>
.box{
	height: 100vh;
	border: 1rpx solid #000000;
	background-color: #007AFF;
}
</style>

接下来看一下真机运行的效果：

上图，【中1】效果为代码未经过任何处理的实际运行效果。可以明显看到，手机底部是有一块白色的区域的，这一点在我的实际项目中【左1】当全屏为黑色时，特别明显。

为解决问题，只有将背景都设置为白色，这时候又跟设计稿冲突了，所以我们要想办法解决底部安全区的问题。

解决方案

进入manifest文件，进入源码，找到app-plus部分，首先参考以下配置：

 // iPhoneX的安全区域配置。
 "safearea": {
    // 安全区域外的背景颜色，默认值为"#FFFFFF"  
    "background":"#CCCCCC",  
    // 底部安全区域配置 
    "bottom":{ 
        // 底部安全区域偏移，"none"表示不空出安全区域，"auto"自动计算空出安全区域，默认值为"none" 
        "offset":"none|auto"        
    },  
    // 左侧安全区域配置（横屏显示时有效）  
    "left": { 
        "offset":"none|auto"  
    },  
    // 右侧安全区域配置（横屏显示时有效）  
    "right: {    
        "offset":"none|auto"  
    }  
}  

这里，我们只针对竖屏状态下的效果进行测试和修改：

"app-plus" : {
        "safearea" : {
            "bottom" : {
                "offset" : "none"
            }
        },
        ...
}

最终效果就是如上图中【右1】的效果一样，可以看到，列表眼神到了安全区，如此设置后，项目中的黑色也会在垂直方向铺满屏幕。

如果要设置背景色的话：

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

UNI提供的安全区CSS常量

当需要同时兼容小程序的时候：

page {
      padding-bottom: constant(safe-area-inset-bottom);/*兼容 IOS<11.2*/
      padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
}

注意：env()和constant()需要同时存在，且顺序不能调换

相关的常量：

获取上安全距离(安全区域距离顶部边界的距离)： 
env(safe-area-inset-top)

获取左安全距离(安全区域距离左边边界的距离)：
env(safe-area-inset-left)

获取右安全距离(安全区域距离右边边界的距离)：
env(safe-area-inset-right)

获取下安全距离(安全距离底部边界的距离)：
env(safe-area-inset-bottom)

比如，我们要在某一个列表中，在底部空出一个安全区的高度，我们可以通过padding-bottom或者bottom赋一个安全值  uniapp内置了两个安全值：

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
box-sizing: border-box;

height: calc(630rpx + env(safe-area-inset-bottom));

相关资料