美文网首页
小程序滚动事件穿透问题

小程序滚动事件穿透问题

作者: anjohnlv | 来源:发表于2018-11-20 15:22 被阅读22次

    基于目前最新的基础库版本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时,页面会跳回最上面。

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


    马克+抛砖引玉,

    相关文章

      网友评论

          本文标题:小程序滚动事件穿透问题

          本文链接:https://www.haomeiwen.com/subject/cnxxqqtx.html