uniapp 去除导航栏后如何实现状态栏沉浸式效果

在uniapp中去除导航栏后，状态栏区域会出现空白，请问如何实现真正的沉浸式效果？我尝试了设置"navigationStyle":"custom"并调整页面背景色，但状态栏背景始终无法与页面融为一体。有没有完整的解决方案可以兼容iOS和Android？需要具体代码示例和注意事项。

2 回复

在 pages.json 中设置当前页面的 navigationStyle 为 custom，然后使用 uni.getSystemInfoSync() 获取状态栏高度，通过 CSS 设置页面顶部内边距为状态栏高度即可实现沉浸式效果。


在 UniApp 中去除导航栏后，可以通过以下步骤实现状态栏沉浸式效果：

1. 去除导航栏

在 pages.json 中配置页面样式，隐藏导航栏：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "",
        "navigationStyle": "custom"
      }
    }
  ]
}

2. 适配状态栏高度

  • 使用 uni.getSystemInfoSync() 获取状态栏高度。
  • 在页面最顶部添加占位视图，高度设置为状态栏高度。

3. 示例代码

<template>
  <view class="container">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 页面内容 -->
    <view class="content">
      您的页面内容
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0
    }
  },
  onLoad() {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
  }
}
</script>

<style>
.status-bar {
  width: 100%;
  background-color: transparent; /* 可根据需要设置颜色 */
}

.content {
  flex: 1;
}
</style>

注意事项：

  • 不同设备状态栏高度可能不同，需动态获取。
  • 在 nvue 页面中可能需要使用 dom.addRule 适配。
  • 测试时请使用真机，模拟器可能显示不准确。

通过以上配置，即可实现去除导航栏后的状态栏沉浸式效果。

回到顶部