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