Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

作者你好,请教一个技术问题 #26

Open
ghost opened this issue Mar 5, 2019 · 8 comments
Open

作者你好,请教一个技术问题 #26

ghost opened this issue Mar 5, 2019 · 8 comments
Labels

Comments

@ghost
Copy link

ghost commented Mar 5, 2019

如果我想全屏(而非屏幕边缘)切换tab页,我该如何解决原生的全屏滑动手势和网页轮播图滚动之间的冲突?我期望达到的效果是像其他浏览器一样,手指在网页轮播图滚动时,原生滑动手势不响应,反之响应。

kapture 2019-03-05 at 15 45 13

@zhongwuzw
Copy link
Owner

@whatsbug 我觉得首先原理是如果手势触发点在轮播图中, 就让我们自己的pan gesture失败,UIScrollView滑动的手势应该是UIWebTouchEventsGestureRecognizer,也就是说,判断触发点在轮播图中,就可以让自己的pan gesture 失败。
所以怎么判断是在轮播图里? 可以看一下轮播图的视图层级有没有特殊的结构,如果没有,需要注入js代码去识别网页是否包含轮播图,以及轮播图的位置,得到之后就很好处理了。

@ghost
Copy link
Author

ghost commented Mar 6, 2019

获取轮播图的位置信息有点棘手😂

@zhongwuzw
Copy link
Owner

zhongwuzw commented Mar 6, 2019

@whatsbug 哪个iOS版本的浏览器实现了你所要的功能呢?我看一下,因为本身轮播图就有很多种实现,CSS,JavaScript都可以实现。本质上讲,就是普通的HTML标签.

@ghost
Copy link
Author

ghost commented Mar 7, 2019

iOS版的夸克是可以的。。

@zhongwuzw
Copy link
Owner

zhongwuzw commented Mar 7, 2019

@whatsbug 大概验证了一下,其实它做的也有问题,我试了一下优酷首页轮播图的滑动,屏幕的手势会干扰到轮播图的滑动,基本导致无法运行,偶尔好像还可以,所以我理解应该方法类似,从js中监听touch事件,判断touch相关的空间是否可滑动,若不可滑动,web端将事件回调回native端,native端来做屏幕切换手势识别。

2019-03-07 15_32_32

@ghost
Copy link
Author

ghost commented Mar 7, 2019

其他什么问题我倒是没有发现,发现唯一一点体验不好的是,它的全屏返回/前进手势必须要网页停止上下滚动时才会触发😂,应该是shouldRecognizeSimultaneouslyWithGestureRecognizer代理方法没返回YES..

@zhongwuzw
Copy link
Owner

@whatsbug 是的。所以实现方法我目前觉得只有一个,就是js判断touch位置进行回传,应该没有别的方法了,因为轮播图也只是普通的CompositingLayer

@ghost
Copy link
Author

ghost commented Mar 8, 2019

嗯嗯,感谢提供思路笔芯

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant