知识教程 | 优化状态栏沉浸式效果

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

使用APICloud时，参照社区源码，初始化状态栏沉浸式，像这样去编写：

apiready=function(){

varheader=$api.byId('header');

$api.fixStatusBar(header);

}

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

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

初始化程序时，index.html文件中apireader内执行：

functioninitHeaderH(){

$api.setStorage('SYSTEMTYPE',api.systemType);

$api.setStorage('SYSTEMVERSION',api.systemVersion);

$api.setStorage('FULLSCREEN',api.fullScreen);

$api.setStorage('IOS7STATUSBARAPPEARANCE',api.iOS7StatusBarAppearance);

}

在打开其他window时，不在apiready内调用，提前处理沉浸式效果，可以解决卡顿问题。

varheader=$api.byId('header');

fixStatusBar_API(header);

apiready=function(){};

写到常用方法内：

//IOS设置bar

functionfixIos7Bar_API(el){

if(!$api.isElement(el)){

console.warn('$api.fixIos7BarFunctionneedelparam,elparammustbeDOMElement');

return;

}

varstrDM=$api.getStorage('SYSTEMTYPE');

if(strDM=='ios'){

varstrSV=$api.getStorage('SYSTEMVERSION');

varnumSV=parseInt(strSV,10);

varfullScreen=$api.getStorage('FULLSCREEN');

variOS7StatusBarAppearance=$api.getStorage('IOS7STATUSBARAPPEARANCE');

if(numSV>=7&&fullScreen=='false'&&iOS7StatusBarAppearance){

el.style.paddingTop='20px';

}

}

}

functionfixStatusBar_API(el){

if(!$api.isElement(el)){

console.warn('$api.fixStatusBarFunctionneedelparam,elparammustbeDOMElement');

return;

}

varsysType=$api.getStorage('SYSTEMTYPE');

if(sysType=='ios'){

fixIos7Bar_API(el);

}elseif(sysType=='android'){

varver=$api.getStorage('SYSTEMVERSION');

ver=parseFloat(ver);

if(ver>=4.4){

el.style.paddingTop='25px';

}

}

};