沉浸式导航栏html,混合开发 h5+ 沉浸式的适配

1.需要在mainfest.json plus对象里添加

"statusbar": {

"immersed": "true",

"style":"dark"

}

2.新建immersed.js

注意 在里边不适用plus,因为plus.ready之后再js改变样式 必然造成页面闪烁跳动

(function(w){

document.addEventListener(‘plusready‘,function(){

//console.log("Immersed-UserAgent: "+navigator.userAgent);

},false);

var immersed = 0;

var ms=(/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userAgent);

if(ms&&ms.length>=3){

immersed=parseFloat(ms[2]);

}

w.immersed=immersed;

if(!immersed){

return;

}

var t=document.getElementsByClassName(‘mui-bar-nav‘)[0];

t&&(t.style.height=(t.offsetHeight+immersed-t.style.paddingTop)+‘px‘,t.style.paddingTop=immersed+‘px‘);

var tt=document.getElementsByClassName(‘mui-content‘)[0];

tt&&t&&(tt.style.marginTop=(tt.style.marginTop+immersed)+‘px‘);

})(window);

这儿需要注意的是 h5+的api也可以获取 例如

使用5+API

判断当前环境是否支持沉浸式状态栏

plus.navigator.isImmersedStatusbar()

如果当前支持沉浸式状态栏则返回true，否则返回false。

获取当前系统状态栏高度

plus.navigator.getStatusbarHeight()

获取系统状态栏高度，Number类型。

其单位是逻辑像素值，即css中可直接使用的像素值，可能存在小数点。

但是由于时机问题还是推荐拿正则判断,然后在需要的页面引入此js即可

原文：https://www.cnblogs.com/fuzitu/p/12557152.html