uni-app导航栏配置

最新推荐文章于 2025-07-09 13:36:55 发布

H_c_l

最新推荐文章于 2025-07-09 13:36:55 发布

阅读量743

点赞数

CC 4.0 BY-SA版权

分类专栏： uni-app\

本文链接：https://blog.youkuaiyun.com/H_c_l/article/details/104751834

本文介绍了uni-app中解决页面内容与状态栏重合的问题，包括通过修改manifest.json关闭沉浸式，设置`navigationBarTextStyle`改变文字颜色，使用CSS变量调整页面布局，以及在pages.json中全局设置状态栏颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uni-app写app的内容会与沉浸栏重合在一起，写好好多，都是有点问题的，这次终于找到解决的方法了，与大家分享一下

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

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

App因为默认为沉浸式，去除导航栏后，页面顶部会直通到状态栏的区域，可能出现如下需求：

改变状态栏文字颜色：设置该页面的 navigationBarTextStyle 属性，可取值为 black/white。如果想单独设置颜色，App端可使用plus.navigator.setStatusBarStyle设置。部分低端Android手机
自身不支持设置状态栏前景色。
改变状态栏背景颜色：通过绘制一个占位的view固定放在状态栏位置，设置此view的背景颜色，即可达到想要的效果，uni-app提供了一个状态栏高度的css变量，具体参考：uni-app内置的CSS变量。

<template>
    <view>
        <!-- #ifdef APP-PLUS --> 
        <view class="status_bar"> 
            <view class="top_view"></view> 
        </view> 
        <!-- #endif -->
        <view> 
             
        </view>
    </view>
</template>
 
<script>
export default {
    
    
    data() {
    
    
        return {
    
    
             
        }
    },
    methods: {
    
    
         
    }
}
</script>
 
<style>