APICLOUD实现沉浸式导航栏在Android和ios上的兼容

原文地址为： APICLOUD实现沉浸式导航栏在Android和ios上的兼容

最近在使用apicloud开发一款APP，项目没有使用安卓和ios开发人员，选择APICLOUD开发，犹豫UI设计的导航栏是沉浸式，在Android和ios上的效果是不一样的，ios上导航栏会浮在内容上面，将内容部分遮挡，如图：

我要达到的是不希望导航栏遮挡住内容部分，经过不懈的努力和各种尝试，终于解决了这个问题，具体步骤如下：
1、在config文件里面配置

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

2、通过判断手机类型给header添加padding-top

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: '#0063ff',//设置APP状态栏背景色
    style: 'light'
  });

css代码：（由于Android和ios的状态栏高度不同）

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

在对应页面执行步骤2的方法即可实现效果

转载请注明本文地址： APICLOUD实现沉浸式导航栏在Android和ios上的兼容