知識教程 | 優化狀態欄沉浸式效果

沉浸式狀態欄是讓開發者尤爲是Android開發者很頭疼的問題,耗費開發者不少精力去校驗代碼在各個系統版本、各個機型上是否有效,今天這篇教程就跟你們分享優化初始化狀態欄沉浸式效果的方法。html

使用APICloud時,參照社區源碼,初始化狀態欄沉浸式,像這樣去編寫:android

apiready = function() {
   var header = $api.byId('header');
   $api.fixStatusBar(header);

}ios

有的開發者可能會遇到在Android機器上,導航欄有卡頓效果,仔細查找緣由,打開api.js 找到fixStatusBar方法,你會發現是api.js裏面根據手機型號等條件操做dom進行適配,方法內還使用了擴展的api對象獲取數據,因此該方法必須在apireader內執行,卡頓效果就是加載api對象的時間,apiready執行變晚。api

下面這個方法分享給你們,幫助大家解決卡頓問題。dom

初始化程序時,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);
}htm

在打開其餘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

相關文章
相關標籤/搜索