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