移动端沉浸式状态栏H5 webAPP----(转载学习)

2017年08月24日  ·  5.5k 次阅读

H5+状态栏透明(沉浸式)/全屏/设置颜色 整理

• 移动端web

H5+对web APP状态栏设置整理：

开发工具：HBuilder 
直接新建移动APP项目
测试方法为HBuilder的ios真机测试

1、沉浸式状态栏

如果页面顶部是图片，一般会把状态栏变成透明。

首先可以检测下当前环境是否支持沉浸式状态栏，检测语句：

//是否支持沉浸式状态栏
alert(plus.navigator.isImmersedStatusbar());

默认是不支持的，会弹出false. 想让环境支持，需要修改项目下的配置文件manifest.json

"plus":{
    "statusbar": {
        "immersed": true
       },
       ...
}

修改完成后，会弹出true.效果如下：

终端支持：

• Android4.4及以上系统支持；

  扫描二维码关注公众号，回复： 3990045 查看本文章

• iOS7.0及以上系统支持。

2、状态栏全屏

全屏并非状态栏透明或变色，而是没有状态栏，也就是看不见电量、信号那条了。
设置语句：

//参数：true - 全屏;false - 不全屏
plus.navigator.setFullscreen(true);

效果如下：

终端支持：
没有终端类型限制

3、状态栏背景色

修改背景色一般用于页面顶部背景色为纯色的场景，修改成和页面一致的背景色，使页面更和谐。

修改语句：

//设置系统状态栏背景色
plus.navigator.setStatusBarBackground('#6495ED'); 

效果如下：

终端支持：

• Android5及以上系统支持；

• iOS7.0及以上系统支持。

4、状态栏文字颜色

与背景色调整相同，如果背景图颜色不当，会造成前景的信号栏文字颜色与背景太相近，看不清前景，此时需要调整前景色。
前景色的使用限制更多些，只能设置黑或白，设置语句：

//参数：dark - 黑色; light - 白色
plus.navigator.setStatusBarStyle('light');

效果如下：

终端支持：

• Android5只有小米和魅族支持，Android6及以上所有安卓支持；

• iOS7及以上支持