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>
  • 4
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app是一种跨平台的应用开发框架,可以同时开发小程序、H5和App。沉浸导航栏是指将页面顶部的组件填充到导航栏的区域,使得导航栏和页面顶部的组件融为一体。在uni-app中实现沉浸导航栏可以通过修改页面的style属性来实现。具体步骤如下: 1. 在page.json文件中找到要实现沉浸导航栏的页面,添加以下代码到该页面的style属性中: ``` "style": { "navigationStyle": "custom" } ``` 这样就将该页面的导航栏设置为沉浸导航栏。 2. 通过uni.getSystemInfo方法获取屏幕的尺寸,可以根据需要进行页面布局的调整。 需要注意的是,以上方法适用于uni-app开发的小程序和H5页面。对于微信小程序页面,也可以通过设置导航栏的背景色为透明来实现沉浸导航栏。具体的实现方可以根据具体的需求和开发框架进行调整。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* [uni-app实现小程序沉浸导航栏/顶部组件占满导航栏](https://blog.csdn.net/qq_52925863/article/details/127451119)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [uniapp设置导航栏沉浸导航栏以及获取屏幕尺寸](https://blog.csdn.net/EvaY_Yang/article/details/125554733)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值