MUI 启用沉浸式&header显示问题

1. 启用沉浸式
   在manifest.json配置文件中添加如下代码（两种方式皆可）
   a、

"plus": {
		"statusbar": {
			"immersed": "supportedDevice",
			"style": "dark"
		},

b、

"plus": {
		"statusbar": {
			"immersed": true
		},

2. 启用沉浸式后，header显示问题
   MUI 中 ，header标签的高度默认为一个固定值。在实际中，不同的移动设备状态栏是不一样的，所以在H5中使用"header"标签时显示出问题。
   （如果使用原生的 标题栏，不会出现如上header显示问题）
   如下解决：
   a、在header标签中添加id=“header”
   b、添加如下js，可放在一个js文件中统一引用

mui.plusReady(function() {

	var topoffset = '45px';

	var header = document.getElementById('header');

	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';

	}

});

c、设置内容栏div 的margin-top 属性，如图所示

3. 启用沉浸式后，下拉刷新时图标高度设置

	down: {
			style: 'circle',
			height: '50px', 
			range: '100px', 
			offset: '35px', 
			callback: pulldownRefresh
					},

4.选项卡显示问题
在启用沉浸式后，如下图所示tab标签，被原生的标题栏遮盖了，
在此我们更改下内容栏的top坐标即可。

① 在js 中，以下是用来展示内容栏html页面的方法

mui(".scroll").on("tap", ".mui-control-item", function(e) {
					var wid = this.getAttribute("data-wid");
					group.switchTab(wid);
				});

② 我们进入switchTab（）方法，在webviewGroup.js中，更改top值即可。