uniapp 解决去除导航栏后，状态栏沉浸式的问题

最新推荐文章于 2024-12-11 16:35:36 发布

diCommon

最新推荐文章于 2024-12-11 16:35:36 发布

阅读量4k

点赞数 4

分类专栏： uniapp js

本文链接：https://blog.csdn.net/u010613970/article/details/113309218

版权

js 同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

uniapp

5 篇文章 0 订阅

订阅专栏

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

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>