apicloud沉浸式兼容问题+中间有一横杆

开发中出现的问题

引入用 apicloud 官方文档中说的解决方案出现下面问题：

原来解决方案，出现上图问题:

apiready = function(){
   var header = $api.byId('header');//获取节点
      $api.fixStatusBar(header);//固定状态栏
      api.setStatusBarStyle({
          style: 'dark',
          color: 'transparent'
       });
 }

解决方案

1、添加样式

 <style>
    /*//其中，IOS状态栏高度为20px，Android为25px*/
    /*兼容ios和Android*/
    .headerIos{
      padding-top: 20px;
    }
    .headerAnd{
      padding-top: -25px;
    }
 </style>

2、在script中添加代码沉浸式兼容代码

apiready = function(){
    var systemType = api.systemType;  // 获取手机类型，比如： ios
    var header = document.querySelector('#header');
    if(systemType=='ios'){//兼容ios和安卓
      $api.addCls(header, 'headerIos');
    }else{
      $api.addCls(header, 'headerAnd');
    }
    api.setStatusBarStyle({
      color: '#ffffff',//设置APP状态栏背景色
      style: 'dark'
    });
}

3、修改配置文件 项目根目录config.xml中修改为以下代码：

<preference name="statusBarAppearance" value="true"/>

结尾：

到这里沉浸是兼容就完美解决；上效果图：