uniapp 沉浸式状态栏

在Uni-app中实现沉浸式状态栏，可以通过以下几个步骤来完成：

1. 在manifest.json文件中配置导航栏样式：

"globalStyle": {
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "Uni-app",
  "navigationStyle": "custom"
}

其中，`navigationStyle`属性设置为`custom`表示使用自定义导航栏样式。

2. 创建一个自定义导航栏组件并引入到需要使用沉浸式状态栏的页面中。可以参考以下示例代码：

<!-- custom-nav.vue -->
<template>
  <view class="custom-nav">
    <view class="status-bar"></view>
    <view class="nav-bar">
      <!-- 导航栏内容 -->
    </view>
  </view>
</template>

<style>
  .custom-nav {
    height: var(--status-bar-height);
    background-color: #fff;
  }

  .status-bar {
    height: var(--status-bar-height);
    background-color: #000; /* 设置状态栏背景色 */
  }

  .nav-bar {
    height: 44px; /* 导航栏高度 */
    /* 导航栏样式 */
  }
</style>

3. 在需要使用沉浸式状态栏的页面中引入自定义导航栏组件，并设置页面样式。可以参考以下示例代码：

<!-- index.vue -->
<template>
  <view class="index">
    <custom-nav></custom-nav> <!-- 引入自定义导航栏组件 -->
    <!-- 页面内容 -->
  </view>
</template>

<script>
  import customNav from '@/components/custom-nav.vue';

  export default {
    components: {
      customNav
    }
  };
</script>

<style>
  .index {
    padding-top: var(--status-bar-height); /* 设置页面内容的上边距 */
  }
</style>

以上步骤中，关键是在自定义导航栏组件的样式中设置状态栏的高度和背景色，并在页面样式中设置页面内容的上边距，使得页面内容不被状态栏遮挡。

请根据实际需求调整样式和布局。希望对你有所帮助！