MUI 启用沉浸式header显示问题

  1. 启用沉浸式
    在manifest.json配置文件中添加如下代码（两种方式皆可）
    a、
"plus": {"statusbar": {"immersed": "supportedDevice","style": "dark"},

b、

"plus": {"statusbar": {"immersed": true},
  1. 启用沉浸式后，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值即可。