uni-app vue3 运行iOS 15首页顶部有空白

uni-app vue3 运行iOS 15首页顶部有空白

开发环境 版本号 项目创建方式
Mac 12.0.1(21A559) HBuilderX

操作步骤：

  • 设置页面首页 "navigationStyle": "custom", 设置 manifest.json 中设置 "vueVersion" : “3" 运行到 iOS15 的设备

预期结果：

  • 代码中最外层 view 能固定到屏幕顶部

实际结果：

  • 启动首页后 代码中最外层 view 未能固定到屏幕顶部

bug描述：

关键代码如下（设置页面 style "navigationStyle": "custom"，样式是 fix 到窗口顶部的）

<view style="padding: 40rpx;position: fixed;top: 0;left: 0;bottom: 0;right: 0;background-color: #666666;margin-top:0">  
    <button style="padding: 30rpx" @click="next">to same page</button>  
    <button style="padding: 30rpx" @click="restart">relunch</button>  
</view>

更多关于uni-app vue3 运行iOS 15首页顶部有空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

后续会优化，已加分，感谢您的反馈！相关问题：https://ask.dcloud.net.cn/question/134169

更多关于uni-app vue3 运行iOS 15首页顶部有空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html


@DCloud_UNI_Anne 这个bug修复有确切的时间表吗？我看11号就有人提了。 我们这边几个着急上线的客户的app首页是沉浸式的，且需要设置状态栏前景文字为白色。

另外，app是用vue3的组合式api写的，无法更改vueVersion

这个问题是由于iOS 15系统对WebView的安全区域处理机制变化导致的。在uni-app vue3中，当设置"navigationStyle": "custom"时，iOS 15设备上会出现顶部安全区域空白。

解决方案：

  1. 使用CSS安全区域变量（推荐）：
page {
  padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
  padding-top: env(safe-area-inset-top); /* iOS 11.2+ */
}
  1. 在页面样式中添加：
.uni-page-head {
  padding-top: var(--status-bar-height);
}
  1. 或者使用uni-app提供的CSS变量：
<view style="padding-top: var(--status-bar-height);">
  <!-- 页面内容 -->
</view>
  1. 在manifest.json中配置：
{
  "app-plus": {
    "safearea": {
      "background": "#ffffff",
      "bottom": {
        "offset": "auto"
      }
    }
  }
}
回到顶部