最近在做个混合app , 用html做页面,然后通过webview嵌套在activity中,效果是这样:

开始还是比较顺利,增加了菜单退出按钮,返回键页面回退功能,页面加载显示加载图标(在app端实现,本来是为了增强用户体验,在页面加载的时候可以显示一个转动的图标,但是到了最后,这个功能反而成了影响用户体验的鸡肋, 因为页面中有很多图片, 每次页面显示出来后,图片还没加载完毕,所以加载图标一直在那里转动,影响了用户浏览页面,最后将此功能删除了)。

以上基本具备了混合app的雏形,可以拿出来忽悠一下客户了。

但是本着追求完美,不断创新的自虐精神,我又想在app上增加左右滑动可使页面前进和倒退的功能。其实在app上实现这些不难,在webview加载一个监听器,监听左右滑动事件,然后调用webview的 goback() 和 goForward就欧了,自己重载一个webview就可以实现,代码如下

public class cbWebView extends WebView {

    private GestureDetector gestureDetector;
private Context cb; public cbWebView(Context context) {
super(context);
cb = context;
gestureDetector = new GestureDetector(this.getContext(),
onGestureListener);
} public cbWebView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle);
cb = context;
gestureDetector = new GestureDetector(this.getContext(),
onGestureListener);
} public cbWebView(Context context, AttributeSet attrs) { super(context, attrs);
cb = context;
gestureDetector = new GestureDetector(this.getContext(),
onGestureListener);
} // 重载滑动事件
@Override
public boolean onTouchEvent(MotionEvent evt) {
gestureDetector.onTouchEvent(evt);
return super.onTouchEvent(evt);
} private GestureDetector.OnGestureListener onGestureListener = new GestureDetector.SimpleOnGestureListener() {
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) { float x = e2.getX() - e1.getX();
float y = e2.getY() - e1.getY(); if (x > 100) {
// 右滑 事件
Toast.makeText(cb, "右滑动2", Toast.LENGTH_LONG).show();
cbWebView.this.goBack();
} else if (x < -100) {
// 左滑事件
Toast.makeText(cb, "左滑动2", Toast.LENGTH_LONG).show();
cbWebView.this.goForward();
} return true;
}
};
}

之后坑爹的问题来了,因为页面中有个轮播图片,也是通过左右滑动切换图片,这就造成了,我滑动轮播图片的时候,也会触发webview的左右滑动事件,这可玩大了,本来只想滑动一下轮播图片,结果跳到了另外的一个页面......

我想造成这个问题的原因是,在html中的滑动事件,顺利的传送到了webview上。 我在网上查了很多资料,一直也没有好的解决办法,http://www.eoeandroid.com/thread-313541-1-1.html 这哥们碰到和我类似的问题,到目前也还没解决。但是这个问题肯定是可以解决的, 我下载了几个浏览器,UCWEB 、qq浏览器、360浏览器可以实现滑动切换页面,并且不与html中的touch事件冲突,android自带浏览器和遨游浏览器没有实现左右滑动切换功能。也许UCweb 这些浏览器没有使用webkit内核,也可能有什么其他高明的解决办法我们不知道。

但是不实现这个功能,总是不甘心,于是我又在baidu上一顿乱找,无意间看到这篇文章让我灵光一现 
http://blog.csdn.net/wangtingshuai/article/details/8635787  这篇文章讲的是 ”响应webview中的图片点击事件“,我好像找到了救命稻草,既然能够响应点击事件,那肯定也可以响应 ontouch事件,我只需要在轮播图片的touch事件中关闭webview的滑动响应就可以了(不要告诉我你不知道js与webview怎么通信, 网上教程有很多,自己看去)。

文章中的代码

// 注入js函数监听
private void addImageClickListner() {
// 这段js函数的功能就是,遍历所有的img几点,并添加onclick函数,函数的功能是在图片点击的时候调用本地java接口并传递url过去
contentWebView.loadUrl("javascript:(function(){" +
"var objs = document.getElementsByTagName(\"img\"); " +
"for(var i=0;i<objs.length;i++) " +
"{"
+ " objs[i].onclick=function() " +
" { "
+ " window.imagelistner.openImage(this.src); " +
" } " +
"}" +
"})()");
}

经过改装后:

// 注入js函数监听
private void addImageClickListner() {
// 这段js函数的功能就是,遍历所有的img几点,并添加onclick函数,函数的功能是在图片点击的时候调用本地java接口并传递url过去
mWebView.loadUrl("javascript:(function(){"
+ "var objs = $('.swiper-container'); " //轮播图片的div容器,
+ "for(var i=0;i<objs.length;i++) " + "{"
+ " objs[i].ontouchmove=function() " + " { "
+ " window.imagelistner.closetouch(); "
+ " return false; } "
+ "}" + "var objs = $('body'); " //点击任何地方 , 系统开始可以接受滚动
+ "for(var i=0;i<objs.length;i++) " + "{"
+ " objs[i].ontouchstart=function() " + " { "
+ " window.imagelistner.opentouch(); "
+ " return false; } "
+ "}" + "})()");
}

经过一番折,腾终于不负众望,达到了预期目标。 这里也有一个小瑕疵, "var objs = $('.swiper-container'); "  在js注入时指定了轮播的div ,缺少通用性。

目前只能做到这一步 ,这是我解决此类问题的一个另类思路,如果有更好的方法,还请高人告知,不甚感激!

webview滑动事件 与内部html左右滑动事件冲突问题的解决办法的更多相关文章

  1. ios访问web页面<div>点击事件不起效果,以及alert()显示url的解决办法

    ios访问web页面<div>点击不起效果,在其div上添加style=”cursor:pointer:“ jquery web页面动态append()事件调用方法:$(document) ...

  2. Android ScrollView内部组件设置android:layout_height="fill_parent"无效的解决办法

    问题:scrollview内部组件都设置了android:layout_height="fill_parent"却没有效果. 解决办法:设置scrollview的fillViewp ...

  3. Vue事件总线(eventBus)$on()会多次触发解决办法

    项目中使用了事件总线eventBus来进行两个组件间的通信, 使用方法是是建立eventBus.js文件,暴露一个空的Vue实例,如下: import Vue from 'vue'export def ...

  4. jeecg3.8popup弹出窗口触发失去焦点事件,引发验证弹窗,影响体验问题的解决办法

    在初始化表单的代码中添加以下加粗部分,有几个popup就定义几个标志位,主要是防止第一次失去焦点时候的弹窗(此时还未来得及选择),提交表单的时候还是会正常校验的. //popup触发失去焦点事件,设置 ...

  5. IE 11 回车事件代码不起作用但是在chrom可以正常运行解决办法

    今天遇到这个问题,搞半天开始以为是代码写错了,后面拿到chrom上执行发现是正常的,就是这段代码 function EnterPress(){          if(event.keyCode == ...

  6. WebView加载本地html、js文件常见问题及解决办法

    声明:基于android studio平台,php语言搭建服务器 目录: 一.JavaScript脚本语言没有反应 二.alert无法弹出 三.html页面之间不能跳转 四.屏幕缩放没有达到预期效果 ...

  7. append()方法生成的元素绑定的事件失效解决办法

    我使用append()方法动态生成的a链接的click事件没有起效果,查找了资料,了解到,我使用的onclick方法绑定的事件对动态生成的元素是无效的,解决办法如下: 使用事件委托,并且要用on来绑定 ...

  8. Android webview clearHistory 不符合逾期的解决办法

    目前在业务开发中有这么一个需求,切换不同的 Fragment, 切换回 WebView 的Fragment时候,要求是打开的初始页面,然后我在 onHiddenChanged() 方法中加载默认地址, ...

  9. input输入框file类型第二次不触发onchange事件的解决办法,简单有效

    在网上看了很多办法,现在将网上大部分说法总结如下: 网上说法: 原因:选择一次后onchange事件没有绑定到input标签上:    解决办法:拷贝一份input标签的副本,每次选择后对原input ...

随机推荐

  1. jquery常用函数与方法

    1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目.jQuery 1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队 ...

  2. oracle 错误代码大全

    oracle错误代码大全(超详细)   ORA-00001: 违反唯一约束条件 (.) ORA-00017: 请求会话以设置跟踪事件 ORA-00018: 超出最大会话数 ORA-00019: 超出最 ...

  3. Hibernate选择题总结

    Hibernate选择题总结 1.在Hibernate中,以下关于主键生成器说法错误的是( ). A.increment可以用于类型为long.short或byte的主键 B.identity用于如S ...

  4. python yield from用法

    Reading data from a generator using yield from def reader(): """A generator that fake ...

  5. IO(六)--- 编码和解码

    编码: 把看得懂的字符变成看不懂码值这个过程我们称作为编码. 解码: 把码值查找对应的字符,我们把这个过程称作为解码. 注意: 以后编码与解码一般我们都使用统一的码表.否则非常容易出乱码. 常用码表: ...

  6. Caliburn.Micro学习笔记(二)----Actions

    Caliburn.Micro学习笔记目录 上一篇已经简单说了一下引导类和简单的控件绑定 我的上一个例子里的button自动匹配到ViewModel事件你一定感觉很好玩吧 今天说一下它的Actions, ...

  7. 【jQuery】 jQuery上下飘动效果

    jQuery实现图片上下飘动效果 function moveRocket() { $(".smallShip") //2000毫秒内top = top + 60: .animate ...

  8. python基础-装饰器

    一.什么是装饰器 装饰器本质就是函数,功能是为其他函数附加功能 二.装饰器遵循的原则 1.不修改被修饰函数的源代码 2.不修改被修饰函数的调用方式 三.实现装饰器的知识储备 装饰器=高阶函数+函数嵌套 ...

  9. 从基层容器类看万变不离其宗的JAVA继承体系

    以容器类为例子,可以观一叶而知秋,看看以前的前辈们是如何处理各种面向对象思想下的继承体系的.读的源代码越多,就越要总结这个继承关系否则读的多也忘得快. 首先摆上一张图片: 看到这张图很多人就慌了,难道 ...

  10. deepin 15.3 安装配置nginx

    1.安装nginx sudo apt-get install nginx 2.配置nginx sudo gedit /etc/nginx/sites-enabled/default 找到:index ...