一、问题产生:

在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真心难解决,重点是搜索不到和我这个问题类似的解决方案,一个都没有,目前只能这样解决;

如果有更好的建议的朋友希望能给我回复下,感谢!

ionic 使用了 crosswalkwebview 所产生的bug 及 解决方案的更多相关文章

  1. 移动Web开发的bug及解决方案

    我目前移动Web开发遇到的bug以及解决方案(慢慢补充当中). 1.android4.0以上一部分手机的webview中,当canvas小于屏幕大小时,绘图时会出现重影,就是说一个图只绘制了一遍,却出 ...

  2. MySQL中char(36)被认为是GUID导致的BUG及解决方案

    MySQL中char(36)被认为是GUID导致的BUG及解决方案 有时候在使用Toad或在程序中,偶尔会遇到如下的错误: System.FormatException GUID 应包含带 4 个短划 ...

  3. [转]rpcndr.h和wtypes.h冲突Bug的解决方案

    [转]rpcndr.h和wtypes.h冲突Bug的解决方案 http://blog.csdn.net/tzwh_86/article/details/9495133 rpcndr.h和wtypes. ...

  4. 转:移动开发中一些bug及解决方案

    网页开发要面对各种各样的浏览器,让人很头疼,而移动开发中,你不但要面对浏览器,还要面对各种版本的手机,iOS好一点,而安卓就五花八门了,你可能在开发中也被它们折磨过,或者正在被它们折磨,我在这里说几个 ...

  5. pycharm下: conda installation is not found ----一个公开的bug的解决方案

    pycharm  conda installation is not  found ----一个公开的bug的解决方案 pycharm+anaconda 是当前的主流的搭建方案,但是常出现上述问题. ...

  6. ionic 中$ionicView.beforeEnter 事件的一个bug

    我在使用ionic写app的时候,需要使用$IonicView.beforeEnter事件,在页面进入前做一些事情,但是发现,它不起作用,很蛋疼,后来,看了别人做的app例子,也涉及到这个$Ionic ...

  7. IOS9.0中hash值的bug与解决方案

    事件起因 事情是这样的:产品上线发布,突然出现了问题.运营Gg过来反应,当场给露珠演示,运营同事的手机是iphone,bug确实是存在的.奇怪的是露珠用了其他iphone手机(借别人的,露珠的是吊死安 ...

  8. 线上bug的解决方案--带来的全新架构设计

    缘由 本人从事游戏开发很多年一直都是游戏服务器端开发. 因为个人原因吧,一直在小型公司,或者叫创业型团队工作吧.这样的环境下不得不逼迫我需要什么都会,什么做. 但是自我感觉好像什么都不精通..... ...

  9. 常见bug及解决方案

    1.外边距叠加 一.发生在一个div内 <!DOCTYPE> <html> <head> <meta http-equiv=Content-Type cont ...

随机推荐

  1. .Net 4.5 的async 和await 的简单理解使用

    原文地址:http://www.cnblogs.com/HJL-Blog/p/4432632.html 所谓的异步编程是利用CPU空闲时间和多核的特性,它所返回的Task或Task<TResul ...

  2. 为什么 1KB = 1024Byte???群里讨论。

  3. 完全搞懂傅里叶变换和小波(1)——总纲&lt;转载&gt;

    无论是学习信号处理,还是做图像.音视频处理方面的研究,你永远避不开的一个内容,就是傅里叶变换和小波.但是这两个东西其实并不容易弄懂,或者说其实是非常抽象和晦涩的! 完全搞懂傅里叶变换和小波,你至少需要 ...

  4. 初识layer 快速入门

    http://layer.layui.com/hello.html 如果,你初识layer,你对她不知所措,你甚至不知如何绑定事件… 那或许你应该用秒做单位,去认识她. 开始了解 第一步:部署 下载l ...

  5. Callgrind 使用 2

    Callgrind是一款和gprof类似的性能分析工具,与gprof不同的是它不需要在编译源码时附加特殊选项,但推荐加上调试选项.Callgrind使用cachegrind的统计信息Ir(I cach ...

  6. heap(堆)和stack(栈)的区别

    heap是堆,stack是栈 stack的空间由操作系统自动分配/释放,heap上的空间手动分配/释放. stack空间有限,heap是很大的自由存储区 C中的malloc函数分配的内存空间即在hea ...

  7. C# 堆栈和堆 Heap &amp; Stack

    首先堆栈和堆(托管堆)都在进程的虚拟内存中.(在32位处理器上每个进程的虚拟内存为4GB) 堆栈stack 堆栈中存储值类型. 堆栈实际上是向下填充,即由高内存地址指向低内存地址填充. 堆栈的工作方式 ...

  8. onclick传对象

    用onclick传对象的时候,用jquery无法进行操作 onclick=(this) 接收到参数后只需要转化一下 console.log($(obj).html());

  9. C# 图像自动切换

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  10. 22-[模块]-hashlib

    1.HASH Hash,一般翻译做“散列”,也有直接音译为”哈希”的,就是把任意长度的输入(又叫做预映射,pre-image),通过散列算法,变换成固定长度的输出,该输出就是散列值.这种转换是一种压缩 ...