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

你的名字 2024-04-17 14:08 12阅读 0赞

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

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