uni-app nvue页面uni-popup弹窗在iOS上位置不居中偏移到屏幕左上角只展示出部分弹窗内容

uni-app nvue页面uni-popup弹窗在iOS上位置不居中偏移到屏幕左上角只展示出部分弹窗内容

操作步骤：

HBuilderX新建项目 -> 选择默认模板 -> 从插件市场安装 uni-popup 插件 -> 编写代码 -> 运行到iOS真机上。 点击页面中的按钮，打开弹窗，弹窗弹出后在屏幕中央短暂停留，然后偏移至屏幕左上角，只展示出部分弹窗内容。

预期结果：

nvue页面，uni-popup弹窗在iOS上居中显示

实际结果：

uni-popup弹窗在iOS上偏移至屏幕左上角，只展示出部分内容。

bug描述：

nvue页面，uni-popup弹窗在iOS上位置不居中，偏移到屏幕左上角，只展示出部分弹窗内容。 代码和录屏在附件中。

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

更多关于uni-app nvue页面uni-popup弹窗在iOS上位置不居中偏移到屏幕左上角只展示出部分弹窗内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

预期效果：

实际效果：

更多关于uni-app nvue页面uni-popup弹窗在iOS上位置不居中偏移到屏幕左上角只展示出部分弹窗内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的nvue页面在iOS上的布局问题。主要原因是nvue的flex布局在iOS平台上的实现与web标准存在差异。

解决方法如下：

  1. 在uni-popup外层容器添加以下样式：
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
justify-content: center;
align-items: center;
  1. 或者使用绝对定位方式：
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
  1. 也可以尝试在manifest.json中配置：
"app-plus": {
  "nvueStyleCompiler": "uni-app"
}
回到顶部