优化状态栏沉浸式效果

2024年2月19日 172次阅读 来源: 攻城狮Right

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

    原文作者：攻城狮Right
    原文地址: https://segmentfault.com/a/1190000017494308
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞