基于目前最新的基础库版本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时,页面会跳回最上面。
不过不管怎么说,勉强实现业务需求了。
马克+抛砖引玉,
网友评论