DCloud_App_Array
DCloud_App_Array
  • 发布:2015-10-28 18:05
  • 更新:2019-01-07 15:31
  • 阅读:67847

如何动态兼容沉浸式状态栏模式

分类:HTML5+

HBuilder6.6.1版本已经完全支持沉浸式状态栏,可以下载最新版本HelloH5应用体验。
各平台配置参考:

  1. Android平台设置沉浸式状态栏显示效果
  2. iOS平台设置沉浸式状态栏显示效果

由于各系统版本的限制,沉浸式状态栏对系统有要求(Android4.4及以上、iOS7.0及以上),如果要兼容各系统版本,需要动态判断当前环境是否支持沉浸式状态栏以及系统状态栏的高度:

使用5+API

  • 判断当前环境是否支持沉浸式状态栏
    plus.navigator.isImmersedStatusbar()
    如果当前支持沉浸式状态栏则返回true,否则返回false。
  • 获取当前系统状态栏高度
    plus.navigator.getStatusbarHeight()
    获取系统状态栏高度,Number类型。
    其单位是逻辑像素值,即css中可直接使用的像素值,可能存在小数点。

实际用法参考HelloH5应用的“plus/doc.html”:

    // 创建加载内容窗口  
    var topoffset='45px';  
    if(plus.navigator.isImmersedStatusbar()){// 兼容immersed状态栏模式  
        // 获取状态栏高度并根据业务需求处理,这里重新计算了子窗口的偏移位置  
        topoffset=(Math.round(plus.navigator.getStatusbarHeight())+45)+'px';  
    }  
    // 使用偏移位置创建子窗口  
    wc=plus.webview.create(null,'doccontent',{top:topoffset,bottom:'0px',bounce:'vertical',bounceBackground:'#FFFFFF'});

通过userAgent判断
5+API需要在plusready事件后才能调用,通常此事件在DOM加载渲染后才会触发,无法再渲染前根据不同的状态来设置css。
为了解决此问题,在支持5+API运行环境的userAgent中特定字段Html5Plus/1.0后添加Immersed标识,如下:
"Html5Plus/1.0 (Immersed/30)"
其中Immersed/后的30表示状态栏的高度,单位为逻辑像素值。

可以使用正则表达式进行获取:

var immersed = 0;  
var ms=(/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userAgent);  
if(ms&&ms.length>=3){ // 当前环境为沉浸式状态栏模式  
    immersed=parseFloat(ms[2]);// 获取状态栏的高度  
}

immersed值如果大于0则表示当前环境支持沉浸式状态栏。
获取状态栏高度后,可以使用js动态修改DOM元素的css属性来设置样式,如设置界面头区域的顶部内边距为状态栏的高度(避免系统状态栏与界面头重叠),示例如下:

var t=document.getElementById('header');  
t&&t.style.paddingTop=immersed+'px';

具体项目中可根据界面设计,灵活使用immersed值来动态适配各种效果。
完整用法可参考HelloH5应用中的“js/immersed.js”

11 关注 分享
meijj522 老醒 rabet Trust fsyang 1***@QQ.COM 可苦可乐 雪之梦技术驿站 wenju 5***@qq.com 1***@qq.com

要回复文章请先登录注册

任我皮

任我皮

iOS设置为沉浸式状态栏后,上拉列表时有时候状态栏就会消失是什么原因,怎么能让状态栏固定住不消失
2019-01-07 15:31
9***@qq.com

9***@qq.com

回复 回梦無痕 :
我要在哪里操作。。。。?
2017-12-04 17:06
回梦無痕

回梦無痕

回复 9***@qq.com :
字体颜色可以改的,一定是你的操作方式不对。
2017-12-04 16:47
9***@qq.com

9***@qq.com

回复 回梦無痕 :
这样的话怎么设置字体颜色值呢?我在background和bottom之后加,都不管用
2017-12-04 15:47
5***@qq.com

5***@qq.com

t&&t.style.paddingTop=immersed+'px';报错的话改成 :t&&(t.style.paddingTop=immersed+'px');
2017-11-01 14:29
1***@qq.com

1***@qq.com

这文档可以的,尤其是第二种比较普遍,且能解决在plusready中更改css的闪烁问题,当然header高度需要加高
2017-10-31 14:18
阿星蜀黍

阿星蜀黍

马克
2017-09-26 16:17
Vicente

Vicente

回复 lacorey :
这样做要不要在manifest.json中设置immersed:ture,,谢谢
2017-08-28 15:23
1***@qq.com

1***@qq.com

回复 回梦無痕 :
但是我的ios 没有效果。。。
2017-07-18 15:45
回梦無痕

回梦無痕

不清楚高的那么复杂干嘛。明明一句代码能搞定的事情
plus.webview.currentWebview().setStyle( {statusbar:{background:'#f7f7f7'},top:0,bottom: 0} );
2017-06-14 17:06