沉浸式状态栏类型就是这样的
HBuilder创建的应用默认不使用沉浸式状态栏样式，需要进行如下配置开启：
打开应用的manifest.json文件，切换到代码视图，在plus -> statusbar 下添加immersed节点并设置值为true。
"plus": {
"statusbar": {/*设置沉浸式状态栏*/
"immersed": true
},
"splashscreen": {
"autoclose": true,/*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；false则需调plus.navigator.closeSplashscreen()关闭*/
"waiting": false,
"delay": "1000"
}复制代码
如果不生效，在distribute节点下的apple和goole两个节点下添加：
"UIReserveStatusbarOffset": true,(apple节点下添加)
"ImmersedStatusbar": true,/*设置为沉浸栏模式*/(goole节点下添加)
"apple": {
"appid": "",/*iOS应用标识，苹果开发网站申请的appid，如io.dcloud.HelloH5*/
"mobileprovision": "",/*iOS应用打包配置文件*/
"password": "",/*iOS应用打包个人证书导入密码*/
"p12": "",/*iOS应用打包个人证书，打包配置文件关联的个人证书*/
"devices": "universal",/*iOS应用支持的设备类型，可取值iphone/ipad/universal*/
"UIReserveStatusbarOffset": false,/*沉浸式状态栏*/
},
"google": {
"packagename": "",/*Android应用包名，如io.dcloud.HelloH5*/
"keystore": "",/*Android应用打包使用的密钥库文件*/
"password": "",/*Android应用打包使用密钥库中证书的密码*/
"aliasname": "",/*Android应用打包使用密钥库中证书的别名*/
"ImmersedStatusbar": true,/*设置为沉浸栏模式*/
}复制代码
因为设置了沉浸式状态栏。所以此时的状态栏高度为0，这时候我们要手动去添加状态栏的高度，顺便说一下，沉浸式是应用级的，所有页面都会变成沉浸式的，所以最好写成公用的去调用添加状态栏高度。var StatusbarHeight;
// H5 plus事件处理,沉浸式导航
mui.plusReady(function () {
// 获取是否为沉浸式状态栏模式
var bi = plus.navigator.isImmersedStatusbar();
//获取系统状态栏高度
if (mui.os.ios) {
if (screen.height >= 812 && screen.width == 375){
//是iphoneX
StatusbarHeight=44;
}else{
//不是iphoneX
StatusbarHeight=20;
}
} else {
//H5+APP原生获取状态栏高度，如果打包不引入iOS原生，也可以只调用下面这句无需判断。
StatusbarHeight = plus.navigator.getStatusbarHeight();
}
var transparentH=$(".p_nav").eq(0).height();//导航栏高度
var headerH = $('.p_wrapper').eq(0).height();//内容区域高度
if(bi===true){//如果为沉浸式状态栏
$(".bar-nav-con").eq(0).css({height: (transparentH + StatusbarHeight)+'px', 'paddingTop':StatusbarHeight+'px'});
//添加状态栏的高度
$('.p_wrapper').eq(0).css({height: (headerH + StatusbarHeight)+'px', 'paddingTop':StatusbarHeight+'px'});
$('.m_wrapper').eq(0).css({ 'marginTop':StatusbarHeight+'px'});
}
//禁止横屏显示,仅支持竖屏显示
plus.screen.lockOrientation("portrait-primary");
})复制代码
因为导航栏是position：fixed定位的，所以导航栏跟内容区域都要分别添加状态栏高度，具体需求根据个人来定。
最后附上更改状态栏颜色的代码//黑底白字，在沉浸式下就是白色字体
void plus.navigator.setStatusBarStyle( 'light' );
//白底黑字，在沉浸式下就是黑色字体
void plus.navigator.setStatusBarStyle( 'dark' );
// 设置系统状态栏背景为红色，沉浸式下不起作用，因为状态栏高度为零。
plus.navigator.setStatusBarBackground('#red');
复制代码
