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

   今天在工作时，上级抛出一个bug给我进行修改，意思是小程序的弹窗在iPhone X机型中会出现如下样式的灰色间隔的样式错误

   由于是机型的不一致导致的错误，我先去了解了一下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 */
1
2
3

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

   如图所示，组件地址为：uni-popup组件地址
   该属性能直接帮助我们取消底部弹窗距离底部的安全距离，首先在props中将safeArea属性值传递过来,并设置默认参数:

   再在uni-popup标签上添加该属性,使其生效(如果未生效，需要查看uni-popup的版本，版本过低是没有safeArea属性的):

   这样我们就解决了底部弹窗的安全距离的设置问题,页面如下: