【工作总结】——小程序开发中底部弹窗在iPhone X中的安全距离问题

Array[林]

已于 2022-07-21 09:44:24 修改

阅读量2.1k

点赞数 2

分类专栏：前端工作总结文章标签：前端微信小程序

于 2022-07-01 12:08:58 首次发布

本文链接：https://blog.csdn.net/m0_50785976/article/details/125555947

版权

今天在工作时，上级抛出一个bug给我进行修改，意思是小程序的弹窗在iPhone X机型中会出现如下样式的灰色间隔的样式错误
bug图片
由于是机型的不一致导致的错误，我先去了解了一下iPhoneX机型与其他机型的差别,如图所示:
机型差别
中间的绿色区域即为安全区域，而iPhoneX版本的机型需要给底部设置安全距离，才能使内容展现在安全区域。而uni-app的弹窗组件中对这一问题进行了设置，代码如下：

/* iphonex 等安全区设置，底部安全区适配 */
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

而我们这个出现的问题就是因为设置了底部的安全距离才会导致底部弹窗到tabbar之间的灰色间距，而我们要做的是将这一段灰色区域消失。
在unni-app中对于组件uni-popup的的使用，我们是有一个专门的属性safe-area来设置底部弹窗的安全距离的：