uni-app 首页index.nvue设置去掉原生导航栏后首次启动App顶部状态栏会延迟消失

uni-app 首页index.nvue设置去掉原生导航栏后首次启动App顶部状态栏会延迟消失

4 回复

官方能否解决这个问题，很影响体验，页面会因为状态栏的高度变化抖动一下

更多关于uni-app 首页index.nvue设置去掉原生导航栏后首次启动App顶部状态栏会延迟消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


参考下 https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-变量

顶部图片mode用heightFix就会有这个问题

在uni-app中，通过"navigationStyle": "custom"去掉原生导航栏后，首次启动App时顶部状态栏延迟消失的问题，通常是由于原生渲染层初始化时序导致的。以下是几种常见解决方案：

  1. 在pages.json中配置全局样式：
{
  "globalStyle": {
    "navigationStyle": "custom",
    "app-plus": {
      "statusbar": {
        "immersed": true
      }
    }
  }
}
  1. 对于NVUE页面，可以在onLoad生命周期中手动设置状态栏样式：
onLoad() {
  if(uni.getSystemInfoSync().platform === 'android') {
    plus.navigator.setStatusBarStyle('light')
    plus.navigator.setStatusBarBackground('transparent')
  }
}
  1. 使用CSS强制覆盖（H5和APP端）：
/* 在App.vue的style中 */
uni-page-wrapper {
  top: 0 !important;
}
  1. 针对iOS设备的特殊处理：
mounted() {
  if(uni.getSystemInfoSync().platform === 'ios') {
    setTimeout(() => {
      plus.navigator.setStatusBarStyle('dark')
    }, 100)
  }
}
回到顶部