vue-swiper icon indicating copy to clipboard operation
vue-swiper copied to clipboard

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

Open Autumnwater opened this issue 8 years ago • 11 comments

Autumnwater avatar Aug 24 '16 04:08 Autumnwater

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

Autumnwater avatar Aug 24 '16 06:08 Autumnwater

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

ValorLin avatar Aug 25 '16 07:08 ValorLin

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

Autumnwater avatar Aug 25 '16 07:08 Autumnwater

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

Telanx avatar Sep 30 '16 08:09 Telanx

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

Telanx avatar Sep 30 '16 08:09 Telanx

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

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

ValorLin avatar Oct 21 '16 04:10 ValorLin

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

chenpenghai avatar Mar 31 '17 15:03 chenpenghai

同上面的报错。。。

xwg2015 avatar Apr 06 '17 10:04 xwg2015

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

chenpenghai avatar Apr 06 '17 10:04 chenpenghai

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

chenpenghai avatar Apr 06 '17 10:04 chenpenghai

这个bug好像还没修复。。

yefeng2016 avatar Sep 17 '17 14:09 yefeng2016