mui 开启沉浸模式状态栏和顶部header偏移

因为有些页面只有开启了沉浸模式才更适合场景的需求，比如引导页，因为沉浸式是在代码视图里面设置，所以开启了就不能关闭，就有了一系列的问题。接下来就说一下沉浸模式吧

1.开启沉浸式

1、将manifest.json-->代码视图->"plus" 下加入
"statusbar": {
"immersed":true
},
开启沉浸式开启功能，对应在ios和google也相应开启
1）IOS：“UIReserveStatusbarOffset":false
2）google：ImmersedStatusbar":true

2.查看是否开启沉浸式：console.log(plus.navigator.isImmersedStatusbar())，true表示沉浸式已经开启，false表示未开始

3.开启了沉浸式后，状态栏和顶部header会有偏移，通过设置head来修正，下面的heardermylab为head的id

mui.plusReady(function () {
var topoffset='45px';
var header=document.getElementById('heardermylab');//在head处加上id='heardermylab'
console.log(header)
console.log(plus.navigator.isImmersedStatusbar())
if(plus.navigator.isImmersedStatusbar()){// 兼容immersed状态栏模式
// 获取状态栏高度并根据业务需求处理，这里重新计算了子窗口的偏移位置
topoffset=(Math.round(plus.navigator.getStatusbarHeight())+45);
header.style.height=topoffset+'px';
header.style.paddingTop=(topoffset-45)+'px';
}
});

当然这样可能还有问题，也可以直接改样式：

var header=document.getElementById('heardermylab');//在head处加上id='heardermylab'
console.log(header)
console.log(plus.navigator.isImmersedStatusbar())
if(plus.navigator.isImmersedStatusbar()){
// 兼容immersed状态栏模式
// 获取状态栏高度并根据业务需求处理，这里重新计算了子窗口的偏移位置
header.style.marginTop='30px';
}

好了，本次分享到此结束，转载请保留原作者地址以及姓名（本人无偿分享经验，有偿接单制作APP，ios和安卓均有APP已上线，有需要可以联系我）

最后

以上就是独特春天为你收集整理的mui 开启沉浸模式状态栏和顶部header偏移的全部内容，希望文章能够帮你解决mui 开启沉浸模式状态栏和顶部header偏移所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。