uniapp navigationStyle: custom 取消默认原生导航栏导致页面顶部进入状态栏区域问题

关于style和background两个字段，虽然一个管理状态栏的前景颜色，一个管理系统状态栏的背景色，但是这种配置权限不高，容易被pages.json内部配置覆盖，也不灵活，所以我就没有使用。在uniapp官网全局文件 --> manifest.json应用配置--> App完整manifest.json里面，之后全局全局搜索(ctrl+f) statusbar的配置。第二，切换到代码视图，在

tengyuxin

2299人浏览 · 2022-09-15 16:21:26

tengyuxin · 2022-09-15 16:21:26 发布

现在的 immersed 配置的解决方案已经失效，暂时不知道什么原因。只能用写一个statusBar把状态栏高度占用

一、最简单的解决方式如下

第一，打开应用的manifest.json文件，

第二，切换到代码视图，在app-plus -> statusbar 下添加immersed节点并设为false。

"app-plus" : {
    "statusbar": {  
        "immersed": false  
        "style": "light",                                          
        "background": "#000" 
    },
}

这部分知识点，在uniapp官网全局文件 --> manifest.json应用配置--> App完整manifest.json里面，之后全局全局搜索(ctrl+f) statusbar的配置。

关于style和background两个字段，能够全局设置状态的背景颜色和前景颜色。

设置状态栏前景颜色和状态栏背景颜色，可以直接通过

"globalStyle": {
		"navigationBarTextStyle": "light", //导航栏标题颜色 及 状态栏前景颜色
		"navigationBarBackgroundColor": "#000",//导航栏背景颜色 及 状态栏背景色
},

手动设置状态栏背景颜色和前景颜色

//如果应用设置为沉浸式状态栏样式，则无法设置状态栏的背景颜色
plus.navigator.setStatusBarBackground("#000000");


//设置前景色，只有两个值（dark和light）
plus.navigator.setStatusBarStyle("light");