小程序页面需要滑动功能
下拉时滑动,展示整个会员卡内容, 下拉view里包含了最近播放:有scrollview,加了下拉功能后,scrollview滑动失败了。
<view class="cover-section" catchtouchstart="handletouchstart" catchtouchmove="handletouchmove"
catchtouchend="handlettouchend"
style="transform:{{coverTransform}};transition:{{coverTransition}};">
<view class="latest-section">
<view class="lat_title">最近播放</view>
<scroll-view class="scroll1" scroll-x enable-flex="true">
<view class="item" wx:for="{{playlist}}">
<image class="item-img" src="{{item.song.al.picUrl?item.song.al.picUrl:'/static/images/recommendSong/02.jpg'}}"/>
<text class="item-value">{{item.song.al.name}}</text>
</view>
</scroll-view>
</view>
</view
问题所在:父元素使用了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的父元素)也会动
解决:
catchtouchstart="handletouchstart" 改成:
capture-bind:touchstart="handletouchstart"
滚动视图滑动正常了。文章来源:https://www.toymoban.com/news/detail-630085.html
<view class="cover-section" capture-bind:touchstart="handletouchstart" catchtouchmove="handletouchmove"
catchtouchend="handlettouchend"
style="transform:{{coverTransform}};transition:{{coverTransition}};">
<view class="latest-section">
<view class="lat_title">最近播放</view>
<scroll-view class="scroll1" scroll-x enable-flex="true">
<view class="item" wx:for="{{playlist}}">
<image class="item-img" src="{{item.song.al.picUrl?item.song.al.picUrl:'/static/images/recommendSong/02.jpg'}}"/>
<text class="item-value">{{item.song.al.name}}</text>
</view>
</scroll-view>
</view>
</view>
文章来源地址https://www.toymoban.com/news/detail-630085.html
到了这里,关于小程序 view下拉滑动导致scrollview滑动事件失效的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!