优化状态栏沉浸式效果

yuyangzhao

使用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';
        }
    }
};


我的问题得到解决，大家可以试试。
ps:编辑器真不好用~~~~

kk_app

看了下 api.js, 原来“状态栏沉浸效果”是完全前端实现的-paddingTop，我一直以为是原生实现的，但这样有个问题，iOS 20px、安卓25px是固定的，会不会有些国内的rom不按照这个来呢？

禅中说缠

回头试试，点个赞先

hbshow

感谢分享

周枫

收藏了，有时间试用一下

YonBIP社区

感谢分享

勇可可【1161277121】

感谢分享

yuyi

好东西

yuyangzhao

kk_app 发表于 2017-4-13 17:40
看了下 api.js, 原来“状态栏沉浸效果”是完全前端实现的-paddingTop，我一直以为是原生实现的，但这样有个 ...

目前没遇到像你说的情况，毕竟还属于少数的吧，如果真的出现了，根据手机型号系统，再在这里面加下适配好了。先解决眼前问题呗！~

Nawalar Studio

感谢分享