MUI——设置沉浸式状态栏

沉浸式状态栏类型就是这样的

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');
复制代码