处理js手势与android view手势的冲突

最新推荐文章于 2025-02-21 17:30:44 发布
最新推荐文章于 2025-02-21 17:30:44 发布
阅读量2.9k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
文章标签： android js 手势冲突 webview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouyongyang621/article/details/47000237
本文探讨了在Android应用中，HorizontalScrollView与ViewPager并存时，如何处理JS手势与Android View手势的冲突问题。通过让JS传递WebView内图片展示区的Rect信息给本地代码，然后在ViewPager的手势处理中判断，若手势发生在该区域内，则将控制权交还给WebView，避免手势冲突。目前作者在杭州菲助科技工作，有兴趣合作可联系。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >




如上图所示：
界面分为页签(HorizontalScrollView)和内容展示(ViewPager)二部分。
每个页签(头条，推荐...)对应一个WebView 。
每个WebView又包涵图片展示区(可以左右滚动查看图片)和数据内容展示区(一个内容集合 类似android的listView)。
内容展示(ViewPager)是支持左右手势来查看上/下一个页签内容 比如在“头条”页签时可以向右滑动切换到"推荐"页签。如果当前对手势事件不做处理，那么WebView的图片展示区的左右手势将失效,它的左右手势已经被 内容展示(ViewPager)处理。
我想到的解决办法是由js告诉界面 WebView的图片展示区的Rect(位置和大小x,y,w,h) 然后 内容展示(ViewPager)在处理手势时如果当前手势是发生在这个Rect中的则将手势控制权交给webview,自己不处理这个手势。
js调用代码如下图:

最低0.47元/天 解锁文章

200万优质内容无限畅学
梦_枫
关注
android webview 右滑返回与GestureDetector 手势冲突解决
weixin_42042620的博客
11-21 1888
最近在搞一个资讯新闻右滑返回退出当前页面，最开始用的是实现SwipeBackActivityBase这个接口，设置 getSwipeBackLayout().setEdgeSize(metrics.widthPixels / 3);//经验证设置一半等于没设置，只有部分区域滑动有滑动返回效果，后面索性我就用滑动手势来实现，先贴代码： class MyGestureListener exten...
Android view手势拖动和缩放
jin广越的博客
03-11 7649
在实际开发中很多地方都要用自定义的手势缩放和可移动的view，在下在开发不久的时候就遇到啦，当时还不懂手势拖动，经过了各种摸索和查阅终于是自己写出来了，感觉收获颇多，这里我是用的矩阵来对自定义的ImageView进行手势缩放和移动的，感觉matrix真是强大的，稍后我定要详细研究一下Matrix, 之后也会写一片博客大家一起讨论啊，学好数学还真是有用，这里我用的OntouchEvent来做的，下面看
android中view手势滑动冲突的解决方法
09-01
本篇文章主要介绍了android中view手势滑动冲突的解决方法，主要解决方法有两种，外部和内部拦截。有需要的可以参考下。
js 移动端 浏览器默认手势与canvas 手势冲突问题。
weixin_59038724的博客
12-05 749
需求场景： h5 需要做一个canvas 绘图标记功能：标记过程中的手势左右上下标记滑动会跟手机浏览器的左右滑动返回上一页，以及下拉滑动刷新页面的手势冲突。解决方案： 通过绘制过程中 阻止touchstart/touchmove/touchend 默认实践即可。 tips： 手机端阻止浏览器默认手势需要设置 参数 {passive: false} 具体功能可参考文档：passive 介绍
安卓事件交互（按键事件、触摸事件、手势识别、手势冲突处理）
weixin_42369301的博客
06-10 2057
文章介绍了包括按键事件、触摸事件、手势识别以及手势冲突处理等安卓事件交互内容。
React Native的滑动手势功能
chenbin___的博客
02-21 744
React Native的滑动手势。首先，我需要回想React Native中处理滑动手势的常用方法。React Native本身没有内置的滑动手势组件，所以可能需要用PanResponder或者第三方库。PanResponder是React Native自带的，可以用来检测触摸事件。记得要在组件的生命周期里正确设置PanResponder，比如在constructor或者useEffect里。然后处理onPanResponderGrant、onMoveShouldSetPanResponder这些方法。
Flutter手势探索——原理与实现的背后
闲鱼技术的博客
09-15 1526
在日常开发中，手势和事件无处不在，比如在 Flutter 应用中点击一个点赞按钮，长按弹出 BottomSheet 和商品列表的滑动等等都存在事件传递和手势识别，Flutter 内部是如何...
Android自定义控件进阶：触摸事件与手势识别
## 1.1 Android自定义控件的重要性与应用场景 在Android开发中，自定义控件是非常重要的一部分。通过自定义控件，我们可以实现更灵活、更符合用户需求的界面展示效果，提升应用的用户体验。自定义控件可以帮助我们...
android中view手势滑动冲突的两种解决方法
xcj_20160810的博客
07-31 2359
android中view手势滑动冲突的解决方法，主要解决方法有两种，外部和内部拦截。有需要的可以参考下。 Android手势事件的冲突跟点击事件的分发过程息息相关，由三个重要的方法来共同完成，分别是：dispatchTouchEvent、onInterceptTouchEvent和onTouchEvent。 ? 1 public
viewer.js图片查看|viewer测试学习.rar
11-10
viewer.js作为html中的图片查看器，使用起来还是很方便的，这里为初学者提供测试学习的js和css 用于个人学习使用
Android View 跟随手势移动和缩放
12-17
Android View 跟随手势移动和缩放，通过在触屏上移动和多个手指的缩放手势实现移动和缩放
android中webview图片点击及图片手势操作
03-04
资源博客地址 http://blog.csdn.net/wangtingshuai/article/details/8635787
Android手势放大缩小组件
01-03
每天学一点2020.4.22（Android-1）Android手势放大缩小组件1. 在Activity中使用2. 在Fragment中使用 Android手势放大缩小组件 这次是我第一次分享每天所学到的东西。今天所要分享的是在Android中实现对组件进行缩放（包括ImageView，TextView等组件）。实现该功能主要依靠ScaleGestureDetector类，该类主要是用于识别一些特定的手势，通过监听手势事件，从而进行相应的处理。下面就介绍具体如何使用。 1. 在Activity中使用 首先创建ScaleGestureDetector实例； private ScaleGestu
解决手势与按钮冲突问题
xietao3
08-28 2291
实现这个手势代理的函数； tapGesture.delegate = self; - (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch {     CGPoint location = [touch locationInView:se
Android笔记(十八)：ViewPager2嵌套WebView手势冲突问题
ZBM来了
03-20 1625
正常情况下，viewpage2嵌套webview会导致网页内容无法滑动，解决该问题的核心在与利用requestDisallowInterceptTouchEvent与onOverScrolled这两个方法 重写WebView如下： public class NestedWebView extends WebView{ public NestedWebView(Context context) { super(context); } public NestedWeb
android scrollview嵌套webview滑动冲突问题
HenryChow_2015的博客
12-27 4372
scrollview嵌套webview中遇到的一些问题 背景：最近写的一个项目，同一页面会结合原生+H5，需要用scrollview+webview。 问题1：当touch点放在webview上时，纵向滑动没任何问题，但横向滑动webview中的banner时，scrollview会出现纵向划动（斜滑）。 分析：由于webview收到touch事件时，也会dispatch给父vi
viewerjs插件增加左右摆动功能
dongheng123的博客
07-07 539
图片查看插件增加左右摆动功能
[Android开发]一、自定义View手势监听GestureDetector使用教程
u013077428的博客
10-23 765
自定义View手势监听GestureDetector使用教程，各个回调方法的详细介绍
swiper和scroll-view冲突 ios
最新发布
03-17
### Swiper与Scroll-View在iOS上的冲突解决方案 在开发过程中，当 `swiper` 和 `scroll-view` 同时存在于页面上并可能引发交互冲突时，尤其是在 iOS 平台上，这种问题尤为突出。以下是针对该问题的具体分析和解决方法。 #### 1. 防止下拉刷新与 `scroll-view` 的冲突 如果在 Android 或 H5 环境中观察到 `scroll-view` 下滑操作同时触发了下拉刷新功能，则可以通过调整事件绑定逻辑来解决问题。具体来说，在 `scroll-view` 中设置属性 `enhanced="true"` 和 `bounces="false"` 能够有效减少不必要的回弹效果[^4]： ```html <scroll-view scroll-y="{{true}}" enhanced="{{true}}" bounces="{{false}}"> </scroll-view> ``` 上述代码片段中的 `bounces="false"` 属性可以关闭滚动视图的弹性反弹行为，从而避免因触碰边界而误触发其他手势动作。 #### 2. 处理 `swiper` 手势捕获优先级 对于 `swiper` 组件而言，默认情况下它会对触摸屏的手势进行捕捉处理。然而，这可能导致其抢占本应由子元素（如 `scroll-view`）响应的操作请求。为了缓解这一矛盾状况，建议采用如下策略之一： ##### 方法A: 设置 swiper 不拦截 touchmove 事件 通过修改框架配置或者自定义样式类名的方式让 `swiper` 放弃对部分特定方向移动事件的关注度。例如，在 Vue.js / Uni-app 场景里可通过 CSS 实现局部禁用手势检测机制: ```css /* 自定义样式 */ .swiper-no-touch { pointer-events: none; } ``` 然后将其应用至目标容器节点之上即可生效。 ##### 方法B: 动态控制 swiper 是否启用拖拽特性 依据实际业务需求动态开启或关闭某个实例对象内部允许用户执行手指划动切换页卡的功能开关参数值 (e.g., `noSwiping`) 来达到目的[^3]: ```javascript this.$refs.mySwiperInstance.noSwiping = true/false; ``` 以上两种方式均有助于降低两者间潜在的竞争关系强度。 #### 3. 彻底移除滚动条显示干扰视觉体验 除了功能性层面外，有时即使解决了技术难题仍可能存在外观方面的小瑕疵——即滚动条的存在感破坏整体界面美观程度。对此现象我们也有相应的对策可供参考使用[^2]: 利用伪元素覆盖原有默认渲染出来的轨道图形结构，并配合透明颜色填充使其不可见化最终达成理想状态下的完全隐匿效果。 ```scss // SCSS 版本 .scroll-view::-webkit-scrollbar { width: 0 !important; /* 宽度设为零 */ height: 0 !important;/* 高度同样置零 */ } // OR 普通CSS写法 .scroll-view{ -ms-overflow-style:none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .scroll-view::-webkit-scrollbar{display:none;} ``` 综上所述，通过对不同维度的技术手段组合运用便能够较为圆满地应对所描述场景中存在的挑战。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值