小程序滚动事件穿透问题

基于目前最新的基础库版本2.4。不确定当前最新版微信是否修复此bug。

微信小程序的事件穿透被大家吐槽了很久。大致是在iOS端scroll-view在滚动时,事件会被page吃掉。从而无法实现只滚动scroll-view的效果。

官方很傲娇得被骂了好了就不回应,那我们只能思考在现有基础上如果实现目标效果。

首先网上大多数的解决方案

 catchtouchmove='doNothing'

在我们这个需求下是无效的。因为这样一来会导致scroll-view也无法滚动。

1.scroll-view事件被page吃掉。

首先,既然scroll-view的事件会被吃掉。我们要做的第一件事就是放弃scroll-view。采用css原生的

overflow: scroll

可以实现同样的效果。而此方法可以解决iOS端事件被吃掉的问题。

2.滚到顶/底后,page仍然会接受滚动事件

以上,可以保证我们的view可以滚动。但是滚到view的边界后,page又会重新接受滚动的事件。导致页面被滚走。
这时候动态设置"disableScroll": true可以解决问题,但是微信不提供。
为解决该现象,我的处理方法是:
在scrollview显示的时候,设置page的高度为刚好填满一屏。这样,在滚到最下的时候,也不会继续往下滚了。
获取屏幕高度的方法为:

wx.getSystemInfoSync().windowHeight

但是在这遗留了一个问题,当设置page的高度等于windowHeight时,页面会跳回最上面。

不过不管怎么说,勉强实现业务需求了。


马克+抛砖引玉,

你可能感兴趣的:(小程序滚动事件穿透问题)