优化状态栏沉浸式效果

[APICloud]

沉浸式状态栏是让开发者尤其是 Android 开发者很头疼的问题，耗费开发者很多精力去校验代码在各个系统版本、各个机型上是否有效，今天这篇教程就跟大家分享优化初始化状态栏沉浸式效果的方法。

使用 APICloud 时，参照社区源码，初始化状态栏沉浸式，像这样去编写： apiready = function() { var header = $api.byId('header'); $api.fixStatusBar(header);

} 有的开发者可能会遇到在 Android 机器上，导航栏有卡顿效果，仔细查找原因，打开 api.js 找到 fixStatusBar 方法，你会发现是 api.js 里面根据手机型号等条件操作 dom 进行适配，方法内还使用了扩展的 api 对象获取数据，所以该方法必须在 apireader 内执行，卡顿效果就是加载 api 对象的时间，apiready 执行变晚。

下面这个方法分享给大家，帮助你们解决卡顿问题。

初始化程序时，index.html 文件中 apireader 内执行： function initHeaderH(){ $api.setStorage('SYSTEMTYPE',api.systemType); $api.setStorage('SYSTEMVERSION',api.systemVersion); $api.setStorage('FULLSCREEN',api.fullScreen); $api.setStorage('IOS7STATUSBARAPPEARANCE',api.iOS7StatusBarAppearance); }

在打开其他 window 时，不在 apiready 内调用，提前处理沉浸式效果，可以解决卡顿问题。 var header = $api.byId('header'); fixStatusBar_API(header); apiready = function() {};

写到常用方法内：

//IOS 设置 bar function fixIos7Bar_API(el){ if(!$api.isElement(el)){ console.warn('$api.fixIos7Bar Function need el param, el param must be DOM Element'); return; } var strDM = $api.getStorage('SYSTEMTYPE'); if (strDM == 'ios') { var strSV = $api.getStorage('SYSTEMVERSION'); var numSV = parseInt(strSV,10); var fullScreen = $api.getStorage('FULLSCREEN'); var iOS7StatusBarAppearance = $api.getStorage('IOS7STATUSBARAPPEARANCE'); if (numSV >= 7 && fullScreen == 'false' && iOS7StatusBarAppearance) { el.style.paddingTop = '20px'; } } } function fixStatusBar_API(el){ if(!$api.isElement(el)){ console.warn('$api.fixStatusBar Function need el param, el param must be DOM Element'); return; } var sysType = $api.getStorage('SYSTEMTYPE'); if(sysType == 'ios'){ fixIos7Bar_API(el); }else if(sysType == 'android'){ var ver = $api.getStorage('SYSTEMVERSION'); ver = parseFloat(ver); if(ver >= 4.4){ el.style.paddingTop = '25px'; } } };

▌本文作者：APICloud 版主 yuyangzhao