小程序 view下拉滑动导致scrollview滑动事件失效

这篇具有很好参考价值的文章主要介绍了小程序 view下拉滑动导致scrollview滑动事件失效。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

小程序页面需要滑动功能

下拉时滑动,展示整个会员卡内容, 下拉view里包含了最近播放:有scrollview,加了下拉功能后,scrollview滑动失败了。

小程序 view下拉滑动导致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" 

滚动视图滑动正常了。

<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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序scroll-view滑动的时候滑动到指定位置

    效果实现 1.滑动的时候调动滑动事件bindscroll=\\\"scroll\\\" scroll-with-animation 过渡动画 scroll-top=\\\"{{scrolltop}}\\\" 距离顶部多少高度 2.在调用scroll里面的事件函数 这里使用的是获取手机屏幕大小的宽度 res.screenWidth 来自适应头部悬浮的位置的显示与隐藏 opacity:( 1 - e.detail.scrollTop / 100 / 3).to

    2024年02月16日
    浏览(41)
  • 小程序中scroll-view的下拉刷新和小程序页面的下拉刷新开启方法

    scroll-view的下拉刷新 video.wxml中 video.js中 页面的下拉刷新 video.json中添加enablePullDownRefresh为true就可以开启

    2024年02月16日
    浏览(43)
  • 微信小程序 列表多选 下拉分页 滑动切换分类

    1、卡片列表 2、分页(下拉页面加载分页数据) 3、分类(页面间互不干扰,数据也不干扰) 4、左右滑动可切换分类 5、列表搜索 6、单选模式(默认单选模式,即点击卡片,回写所选数据) 7、 多选 模式(实现微信聊天多选效果) 长按 列表或 点击多选 ,进入多选模式;

    2024年02月03日
    浏览(41)
  • 微信小程序——监听页面滑动(二)判断用户在做向上滑动还是向下滑动(onScrollPage scroll-view)

    知识专栏 专栏链接 微信小程序专栏 https://blog.csdn.net/xsl_hr/category_12338067.html?spm=1001.2014.3001.5482 Git版本管理 https://blog.csdn.net/XSL_HR/article/details/130986889?spm=1001.2014.3001.5501 监听页面滑动 https://blog.csdn.net/XSL_HR/article/details/130986889?spm=1001.2014.3001.5501 有关 微信小程序 的相关知识可以前

    2024年02月11日
    浏览(43)
  • 微信小程序——页面事件,.启用下拉刷新监听页面的下拉刷新事件,上拉触底事件,停止下拉刷新的效果

    下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。 启用下拉刷新有两种方式: a.全局开启下拉刷新 在 app.json 的window 节点中,将 enablePullDownRefresh 设置为 true. b.局部开启下拉刷新 在页面的.json 配置文件中,将 enablePull

    2024年01月25日
    浏览(54)
  • 微信小程序 scroll-view 实现自动滑动到底部

    要实现实时聊天功能的话,那么每次有新的消息进来之后,要自动的滚动到底部。 scroll-view 有一个属性 scroll-into-view : 把新进来的消息, push 添加到消息列表 messageList 中。 但页面不会自动往下滚动。 1、在 scrill-view 节点最下面加一个垫片节点。 需要说明的是:这里的 3 个

    2024年02月10日
    浏览(59)
  • Swift 如何确定 scrollView 已经滑动结束

    在 iOS 的 UIScrollView 中,你可以通过实现 UIScrollViewDelegate 的方法来检测滑动结束事件。具体来说,你可以实现以下方法: 在上述方法中,scrollViewDidEndDragging( :willDecelerate:) 方法在用户结束拖拽时被调用,而 scrollViewDidEndDecelerating( :) 方法在用户结束减速时被调用。如果用户滑动

    2024年02月15日
    浏览(36)
  • [微信小程序] scroll-view组件下拉刷新,怎样结束刷新(已解决)

    官方文档:scroll-view | 微信开放文档 (qq.com) 这里就不赘述scroll-view的基本使用方法了,先看问题:  代码:  由于在官方文档中并没有详细说明如何在刷新完成之后关闭刷新,这里我给出的解决办法就是,给组件绑定一个刷新数据,然后在触发下拉刷新的函数中手动将数据改

    2024年01月20日
    浏览(64)
  • 微信小程序scroll-view下拉刷新与上拉加载更多

    1、wxml代码 2、js代码 3、需要注意的是当前页面最外层元素的样式里要加上overflow:scroll 或者 overflow-y: scroll 否则scroll-view上的方法不起作用

    2024年02月11日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包