1.在mainfest.json的plus中以下位置添加statusbar内容
"plus": {
"statusbar":{
"immersed": true/*沉浸式状态栏*/
}
}
2、获取状态栏高度
方法一:
var immersed = 0;
var ms=(/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userAgent);
if(ms&&ms.length>=3){ // 当前环境为沉浸式状态栏模式
immersed=parseFloat(ms[2]);// 获取状态栏的高度
console.log(immersed);
}
方法二:
//是否是沉浸式状态栏
let isImmersedStatusbar =plus.navigator.isImmersedStatusbar;
if(isImmersedStatusbar){
//获取系统状态栏高度
let StatusbarHeight = plus.navigator.getStatusbarHeight;
}
3.因为沉浸式状态栏,会出现内容顶到状态栏的情况,所以需要修改响应的代码
//修改头部导航栏
let vanbar = document.getElementById("vanbar");
vanbar.style.paddingTop =StatusbarHeight+'px';
//修改头部下面的内容,以免遮挡文字
let content = document.getElementById("content");
StatusbarHeight = StatusbarHeight+60 ;
content.style.marginTop =StatusbarHeight+'px';