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已上线，有需要可以联系我）