uni-app popup组件在ios系统里面使用bottom模式有间隙

uni-app popup组件在ios系统里面使用bottom模式有间隙

示例代码：

<uni-popup ref="infoPopup" type="bottom" :safe-area="false"></uni-popup>

操作步骤：

  • 弹窗出现

预期结果：

  • 弹窗在ios端表现正常

实际结果：

  • 弹窗在ios端表现不正常，底部有间隙

bug描述：

开发app，在vue模式里面，使用uni popup组件，使用bottom模式，底部弹出。 在安卓是正常的，但是在ios手机上面，会有间隙。 搜了一下，说在popup组件上面设置 :safe-area="false" 属性就可以解决这个问题。 但是设置之后，发现还是没有解决问题？ 请问一下官方人员怎么处理呢？

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 10
HBuilderX 正式
HBuilderX版本 4.24
手机系统 iOS
手机版本 iOS 18
手机厂商 苹果
手机机型 x
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app popup组件在ios系统里面使用bottom模式有间隙的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

有没有官方人员或者知道的大佬解答一下呢，感谢！！！！！

更多关于uni-app popup组件在ios系统里面使用bottom模式有间隙的实战教程也可以访问 https://www.itying.com/category-93-b0.html


hello, 可以提供一下这相关的可以复现的代码吗？

这个问题是iOS系统安全区域导致的常见现象。虽然设置了:safe-area="false"，但可能还需要额外处理：

  1. 检查是否使用了env(safe-area-inset-bottom)样式，iOS会自动添加底部安全区域

  2. 可以尝试添加以下CSS强制覆盖：

.uni-popup__wrapper.uni-popup__wrapper--bottom {
  padding-bottom: 0 !important;
  bottom: 0 !important;
}

  1. 如果使用nvue页面，需要额外处理safe-area-inset

  2. 也可以尝试在manifest.json中配置：

"app-plus": {
  "safearea": {
    "bottom": {
      "offset": "none"
    }
  }
}
回到顶部