当前位置: 首页 > news >正文

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

小程序页面需要滑动功能

下拉时滑动,展示整个会员卡内容, 下拉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" 

滚动视图滑动正常了。

<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>

 

http://www.lryc.cn/news/112100.html

相关文章:

  • 《ROS2》教程
  • 抖音seo源码开发源代码搭建分享
  • MATLAB——使用建立好的神经网络进行分类程序
  • Spring5.2.x 源码使用Gradle成功构建
  • iOS永久签名工具 - 轻松签使用教程
  • 如何申请中国境内提供金融信息服务业务许可
  • Java多线程(六)
  • ceil(),floor(),round()函数C++详解
  • 自动化处理,web自动化测试处理多窗口+切换iframe框架页总结(超细整理)
  • 企业服务器数据库中了devos勒索病毒怎么办如何解决预防勒索病毒攻击
  • three.js学习
  • Vue3 第一节 Vue3简介以及创建Vue3工程
  • 用docker 部署springboot项目
  • maven 模块打包时包含依赖和打包可执行的jar
  • perl脚本调用openssh不能正确执行(ctl_dir /root/.libnet-openssh-perl/ is not secure)的原因排查
  • Apache+Tomcat 整合
  • CSS中page-break-after属性
  • mvn build jar依赖和源码本身分开。减轻编译后的jar大小
  • Java是值传递还是引用传递?
  • 16 - 初探Linux进程调度
  • Huggingface使用
  • Android 刷新与显示
  • 三行命令在CentOS 8上安装FFmpeg
  • 【前端】html
  • 【RealTek sdk-3.4.14b】Realtek WiFi开发调试指令总结
  • 基于Vue 的文本类弹框代码Demo
  • 2023.08.01 驱动开发day8
  • 计算机视觉--距离变换算法的实战应用
  • MIT 6.824 -- MapReduce -- 01
  • 概念解析 | 利用IAA迭代自适应方法实现高精度角度估计