优化状态栏沉浸式效果

35次阅读

共计 1641 个字符,预计需要花费 5 分钟才能阅读完成。

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

正文完
 0