一、問題產生：
在ionic app 優化方案中，我在前之前的博文中提到使用 --crosswalkwebview；
使用了crosswalkwebview后，app的顯示及兼容效果確實很不錯，雖然app大小多了20m左右，但是，當時想着，沒所謂了，只要體驗提升了即可；
但是在之后，我突然發現了一個bug：
“當ionic的鍵盤彈出的瞬間，整個視圖會出現迷之閃動，貌似那一瞬間，整個視圖被壓縮得剩下一半了”
這個bug特別是在有背景圖片的視圖的情況下，顯得特別的惡心，也就是整個背景圖片在那一瞬間被無情的壓縮，顯得特別難看；
在網上各種搜索，並不能找到相應的解決方案，渾身難受~~~
二、思考：
后來自己在研究這個bug原因的時候，發現了，當app處於全屏的時候，這個bug就不復存在了；
這個發現讓我突然想到了狀態欄，statusBar，肯定和它有關系；
於是，我把狀態欄設置為：
StatusBar.overlaysWebView(true)，也就是懸浮狀態；
在打包嘗試的時候，確實，這個bug沒有出現，因此這里，我想到了個解決方案，就是將狀態欄設置成懸浮，然后，header 和 ion-content 都給個margin-top ，值為狀態欄的高度；
三、解決
1、確定裝了2個cordova插件
cordova plugin add cordova-plugin-statusbar cordova plugin add ionic-plugin-keyboard
2、在入口頁面 index.html ，為ion-nav-view 添加 id="adjustHeightAfterKeyboard"
3、在app.js里面添加一下代碼
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
//動態計算最外層 ion-nav-view 的高度，使鍵盤彈出時不會擋住內容
window.addEventListener('native.keyboardshow', keyboardShowHandler);
window.addEventListener('native.keyboardhide', keyboardHideHandler);
var viewDom = document.getElementById('adjustHeightAfterKeyboard')
function keyboardShowHandler(e){
var viewHight = document.body.clientHeight - e.keyboardHeight;
viewDom.style.height = viewHight + 'px';
}
function keyboardHideHandler(e){
viewDom.style.height = document.body.clientHeight + 'px';
}
}
if (window.StatusBar) {
//將手機狀態欄設置成懸浮
StatusBar.overlaysWebView(true);
StatusBar.backgroundColorByHexString("#2e2b36");
}
4、給header-bar 和ion-content 加上上邊距
.bar-header{
box-shadow: 0 1px 1px 0 #eee;
margin-top:23px;
}
.scroll-content{
margin-top:23px;
}
ok，到此，假裝以為可以了，運行了下，好像確實可以，但是，又出現了一個bug，心好累！！
app 在splashscreen 消失，進入首頁的時候，狀態欄並不懸浮，導致了明顯的空白上邊距，而其他頁面都不會，且從其他頁面再切回來首頁的時候，bug就消失了。
因此，我只能又加了個判斷，在首頁的controller.js寫上以下代碼
//修復首次進來頭部有margin 的bug;(判斷歷史的view個數並且判斷其他視圖是否被點擊緩存着)
var childViews = Object.keys($ionicHistory.viewHistory().views).length; //視圖里面歷史view個數
var sblingsViews = $('.tab-content').length; //tab視圖的個數
if(childViews == 1 && sblingsViews == 1){
$scope.isFirstTimeHome = true;
}else{
setTimeout(function(){
$scope.isFirstTimeHome = false;
},300)
}
根據 $scope.isFirstTimeHome 來控制是否讓margin-top 為0，也即是說如果是首次進來$scope.isFirstTimeHome =true，讓margin-top為0，就解決了該bug
ok，到此為止，算是解決了；
但是我想着，是否有更好的方法能解決啊，好煩，ionic的bug真心難解決，重點是搜索不到和我這個問題類似的解決方案，一個都沒有，目前只能這樣解決；
如果有更好的建議的朋友希望能給我回復下，感謝！