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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM