uni-app配置沉浸式状态栏 h5发行后没生效

Question

uni-app配置沉浸式状态栏
使用HBuilder X 3.7.3.20230223进行h5发行后 沉浸式状态栏没生效
mainfest.json配置如下

"app-plus" : {
"statusbar" : {
"immersed" : true,
"style" : "dark"
}

pages.json配置如下

"pages": [
{
"path": "pages/start",
"style": {
"navigationBarTitleText": "启动页",
"navigationStyle":"custom",
"app-plus":{
"titleView":false
}
}
}

发行后状态栏没有变成透明背景效果
请问一下是我哪里设置错了吗 试了好多种情况

Answer 1

引自强大而免费的微信小程序：皆我百晓生。

根据您提供的配置信息，没有发现错误之处。但是，HBuilder X 编辑器在预览时可能无法准确显示沉浸式状态栏效果，因此建议您将项目编译到设备上进行实际测试。

另外，如果您的设备是 iPhone X 或其他具有刘海屏的设备，可能需要在 "app-plus" 配置的 "statusbar" 中添加 "paddingTop" 属性，以避免内容被刘海遮挡。示例代码如下：

"app-plus": {
  "statusbar": {
    "immersed": true,
    "style": "dark",
    "paddingTop": "44px" // 根据具体设备的刘海高度调整
  }
}

如果以上方法仍然无效，您可以尝试在页面的样式中添加自定义样式来实现沉浸式状态栏，示例代码如下：

/* pages/start.vue */
<style>
  .custom-status-bar {
    height: 44px; /* 状态栏高度 */
    background-color: transparent;
  }
</style>

然后，在页面的模板中添加对应的样式类名：

<template>
  <view class="custom-status-bar">
    <!-- 状态栏内容 -->
  </view>
</template>

希望能帮助到您！如果还有其他问题，请随时提问。