scroll-view竖向滚动点击事件失效

发布于 6 年前作者 ghao3877 次浏览最后编辑 6 年前来自 ask

现在的问题是,在手机端,如果右侧商品列表没有撑开scroll-view的时候,我用手指上下滑之后,再点击左侧的列表选项卡第一次是没法触发点击事件的。每次都是第二次点击才触发。如下图,如果列表撑开了滚动,可以滚动的话就没事。不知道是什么原因阻止了左侧的点击事件。求解答

WXOPEN Club 内容图片 WXOPEN Club 内容图片

这是HTML布局

WXOPEN Club 内容图片

这是CSS布局

WXOPEN Club 内容图片
10 回复
qlai
qlai1 楼6 年前

问题找到了,原因还是滚动回弹导致,但是scroll-view组件的touchmove事件无法被catch阻拦导致catchtouchmove无效。我们后续会修复这个问题。

dzhao
dzhao2 楼6 年前

奇怪,方便把你这个页面的完整代码(wxml、wxss和js)贴出来么?敏感信息用一些没用的数据替代一下就行。

guiying10
guiying103 楼6 年前

@ZaKing 可以尝试一下在页面的json文件里加上

            “disableScroll”: true

来禁止整个页面的滚动,应该也能修复你的问题。

yongqian
yongqian4 楼6 年前

可以了,解决了,非常感谢

yan71
yan715 楼6 年前

这是因为触发了页面的滚动回弹,而滚动中元素的子元素是不允许触发tap事件的。再加上你的页面元素是fixed定位,所以看不出页面滚动回弹的效果。

目前你可以通过给.good-part那个元素增加一个catchtouchmove句柄来阻断touchmove事件的冒泡,进而防止这种情况发生,比如

WXOPEN Club 内容图片 WXOPEN Club 内容图片

这个问题我们后续会继续跟进一下,看看有没有更优雅的解决方案。

qiangxue
qiangxue6 楼6 年前
WXOPEN Club 内容图片

但是我给这三层都加了catchtouchmove事件,也无法阻止么?

cwu
cwu7 楼6 年前

哪一层都行啊,只要不冒到page上就可以。

rlei
rlei8 楼6 年前
WXOPEN Club 内容图片

,阻断冒泡可以阻断这个滚动回弹。

guna
guna9 楼6 年前

你的preventEvent方法有实现么?

lei87
lei8710 楼4 年前

也就是说,如果按照我目前的写法,是无法解决这个滚动回弹所引起的问题的。是嘛