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

手机上面上下滑动的时候,如何防止变成轮播,而让页面没法滚动 #5

Open
Autumnwater opened this issue Aug 24, 2016 · 11 comments
Assignees
Labels

Comments

@Autumnwater
Copy link

No description provided.

@Autumnwater
Copy link
Author

应该是让可以控制preventDefault的开启和关闭

@ValorLin
Copy link
Owner

额,如果这样处理,那这个 vue-swiper 插件是不是直接没法用了。。。
如果是这样的话,我猜你的需求是想控制整个组件是否接受用户操作?如果是这样的话,我觉得可以提供一个 disabled 的配置项,来暂时停用 vue-swiper 。

@Autumnwater
Copy link
Author

能用的。主要是我们页面比较奇葩,一个页面4个轮播。。。。然后在 移动端下面,上下滑动就是 触发轮播,而页面的滚动却没触发。。。所以用户压根没法把页面滚动到下面。
现在的解决方法其实就是 把preventDefault删了,然后实际效果就是 上下滚动的时候 ,即轮播,又让页面滚动。。。这个其实不错。。。。也不需要说 你上下的时候 暂停swiper,,左右的时候启动。
(ps:话说换了头像后,得到中国作者回复总是很及时啊)

@Telanx
Copy link

Telanx commented Sep 30, 2016

@Autumnwater 这个问题我也碰到过了,发现vue-swiper是通过判断偏移量>0来决定要不要e.preventDefault(),在上下滑动时,无论你怎么垂直下滑,都不可避免会产生水平便宜,vue-swiper处理就阻止默认下滑了,所以解决办法是,在源码第139行,偏移量0稍微改一下比如改为10,这样,由于竖直滑动引起的微小水平便宜量可以被过滤掉@weilao

@Telanx
Copy link

Telanx commented Sep 30, 2016

@weilao 根据水平轮播或者竖直轮播来判断那一个方向是否有偏移在实际中会有问题,建议做法是结合水平偏移和垂直便宜。比如如果是水平轮播,当竖直偏移量大于水平偏移量的时候(滑向角度小于45度),应该把它当做是用户下滑动作(即便他有水平偏移,不阻止默认事件)

@ValorLin ValorLin added the bug label Oct 16, 2016
@ValorLin ValorLin self-assigned this Oct 21, 2016
@ValorLin
Copy link
Owner

@Telanx
我之前也试过这个方案,但是做出来后感觉效果并不好。
单纯的判断水平方向的垂直方向的位移哪个大,会导致正常想左右切图片的时候,失败率显著提高。
由于这个 bug 只发生在页面有滚动条的情况下,而新产生的问题则会影响全部情况,故没有将采用此方案。

实际上我这边还有一个效果更好的方案:先向上查找,找到第一个可以滚动的 parentElment,并检测它是否产生了滚动,如果产生了滚动,则跳过 swiper 的 touchstart。这个方案能使页面操作起来流畅不少,我今天晚上再抽点时间整理一下,看看能不能完美解决这个问题。

@chenpenghai
Copy link

chenpenghai commented Mar 31, 2017

@weilao 请问在滑动时报了这样的错是怎么回事那?我用的是vue2.0的。found in - use the "name" option for better debugging messages

@xwg2015
Copy link

xwg2015 commented Apr 6, 2017

同上面的报错。。。

@chenpenghai
Copy link

@justlikeu 这个是1.0的,需要改动代码

@chenpenghai
Copy link

@justlikeu 联系我,我可以给你改好的,并且修复了部分bug。qq:914266208

@yefeng2016
Copy link

这个bug好像还没修复。。

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

6 participants