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