APP开发平台 > Blog > 优化状态栏沉浸式效果

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

  沉浸式状态栏是让开发者尤其是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';
       }
   }
};


更多APP资讯,请关注www.apicloud.com

2018-02-23 来源:APICloud

apicloud

An efficient app outsourcing platform that guarantees timely delivery!

Submit Requirements