mui android 状态栏,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');

复制代码