项目中如果要去掉导航栏的话,状态栏就会自动开启沉浸式,这时候就需要解决这个状态栏的问题,目前找到以下两个方法解决:

1、最简单的解决方式就是配置mainfest.json来关闭沉浸式。即通过打开应用的manifest.json文件,切换到代码视图,在app-plus -> statusbar 下添加immersed节点并设为false。

"app-plus" : {
    "statusbar": {  
        "immersed": false  
    },
}

2、其次可通过顶部状态栏占位的方式来解决页面的状态栏的问题

<template>
  <view>
      <view class="status_bar">
          <!-- 这里是状态栏 -->
      </view>
      <view> 状态栏下的文字 </view>
  </view>
</template>    
<style>
  .status_bar {
      height: var(--status-bar-height);
      width: 100%;
  }
</style>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐