uni-app "navigationStyle":"custom"下 ios启动后第一个页面状态栏为白色未隐藏

uni-app “navigationStyle”:"custom"下 ios启动后第一个页面状态栏为白色未隐藏

开发环境 版本号 项目创建方式
Mac 11.6 HBuilderX

操作步骤：

uniapp vue3 全局设置"navigationStyle":“custom”,ios vue方式 启动后第一个页面状态栏未隐藏。

预期结果：

uniapp vue3 全局设置"navigationStyle":“custom”, 启动后所有页面状态栏和标题栏都隐藏。

实际结果：

uniapp vue3 全局设置"navigationStyle":“custom”,ios vue方式 启动后第一个页面状态栏未隐藏。

bug描述：

使用vue3 ,全局设置"navigationStyle":“custom”, vue,ios启动后第一个页面状态栏为白色，未隐藏,标题栏隐藏了。vue2正常。

相关链接：


更多关于uni-app "navigationStyle":"custom"下 ios启动后第一个页面状态栏为白色未隐藏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

问题复现，后续优化，已加分，感谢您的反馈！

更多关于uni-app "navigationStyle":"custom"下 ios启动后第一个页面状态栏为白色未隐藏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，当全局设置 "navigationStyle":"custom" 时，iOS 平台启动后第一个页面状态栏未隐藏的问题，通常是由于 iOS 系统对状态栏的默认处理机制与 Vue 3 的渲染时机存在差异导致的。

原因分析：

  1. iOS 系统限制：iOS 的状态栏样式在应用启动时由系统默认控制，自定义导航栏的生效需要一定时间。
  2. Vue 3 渲染时机：Vue 3 的响应式系统和生命周期与 Vue 2 略有不同，可能导致状态栏隐藏的代码执行时机稍晚。
  3. 启动页过渡：从启动页切换到首页时，状态栏可能短暂保持系统默认样式。

解决方案：

  1. 在首页的 onLoad 或 onShow 生命周期中强制设置状态栏样式：
    onShow() {
  // 设置状态栏为透明
  uni.setNavigationBarColor({
    frontColor: '#000000',
    backgroundColor: '#00000000'
  });
}
  2. 使用 uni.hideNavigationBarLoading() 辅助隐藏（部分场景有效）：
    onReady() {
  uni.hideNavigationBarLoading();
}
  3. 延迟设置状态栏样式（应对渲染时机问题）：
    onMounted(() => {
  setTimeout(() => {
    uni.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: '#00000000'
    });
  }, 100);
});
回到顶部