微信小程序中scroll-view被三个touch事件影响导致无法滑动的问题

问题所在:父元素使用了touchstart,touchmove,touchend三个事件,导致作为子元素的scroll-view组件无法滑动
解决办法:父元素绑定touchstart事件时不要使用catch绑定,使用capture-bind:touchstart="fn"绑定,也就是捕获模式,touchmove和touchend还是使用catch绑定
小知识1:为什么不用bind绑定touchstart,touchmove,touchend呢,因为使用bind会导致拖动元素时元素卡顿问题
小知识2:为什么touchmove和touchend不需要更改为使用capture-bind绑定呢,这个我试了一下,会导致scroll-view滑动事件和touchmove事件冲突,然后你滑动scroll-view组件时你添加了touchmove的那个元素(这是是scroll-view的父元素)也会动

出问题的代码:

<view catchtouchstart="fn" catchtouchmove="fn" catchtouchend="fn">
<scroll-view>
      <image></image>
      <image></image>
      <image></image>
      <image></image>
</scroll-view>
</view>

解决问题的代码:

<view capture-bind:touchstart="fn" catchtouchmove="fn" catchtouchend="fn">
<scroll-view>
      <image></image>
      <image></image>
      <image></image>
      <image></image>
</scroll-view>
</view>
posted @ 2022-03-23 21:23  QTDD  阅读(1713)  评论(1)    收藏  举报