1. 程式人生 > 其它 >微信小程式中scroll-view被三個touch事件影響導致無法滑動的問題

微信小程式中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>