uni-app 更新到3.1.22之后 scroll-view 组件单指下滑不触发 touchmove 必须双指

uni-app 更新到3.1.22之后 scroll-view 组件单指下滑不触发 touchmove 必须双指

开发环境 版本号 项目创建方式
Windows Windows 10家庭中文版 HBuilderX

操作步骤:

<template> <view class="refresh-body" [@touchmove](/user/touchmove).stop.prevent> <scroll-view scroll-y [@touchstart](/user/touchstart)="touchstart" [@scrolltolower](/user/scrolltolower)="loadMore" [@touchmove](/user/touchmove)="touchmove" [@touchend](/user/touchend)="touchend" class="refresh-scroll"> <view class="refresh-icon" :style="{top:top+'px',transform: `translateX(-50%) rotate(${rotate_number}deg)`}"> <image src="/static/images/jiaziazhong.png" mode="widthFix"/> </view> <view class="content123"> <slot name="content"></slot> </view> </scroll-view> </view> <script> export default { name:'t-refresh', props:{ //高度 height: { type: String, default: '100vh' }, //padding高度 配合tabs tPadding: { type: String, default: '0' }, //是否展示上拉加载 show_more:{ type: Boolean, default: true }, //上拉状态 0 上拉加载更多 1 加载全部 2 上拉加载中 3 不展示组件 loadingType: { type : Number, default: 0 }, //上拉状态文字 loadingText : { type : Array, default : function () { return ["上拉或点击加载更多","已加载全部数据",'加载中','']; } }, }, data() { return { top:-90, touchstart_num:0, //点击位置 touchmove_num:0, //移动距离 move_number:0, //拖动距离 rotate_number:0, timer:null, is_refreshs:true, //是否刷新 move_timer:null, }; }, methods: { //触底加载更多 loadMore(e) { if(this.show_more){ this.$emit("loadMore") } }, //点击位置 touchstart(e){ this.touchstart_num=e.touches[0].clientY }, //移动距离 touchmove(e){ console.log('---888----',e) if(!this.is_refreshs&&e.touches.length<=1){ this.move_number=e.touches[0].clientY-this.touchstart_num this.rotate_number=this.move_number*2 if(this.move_number<120){ this.top=(this.move_number)/1-90 }else if(120<=this.move_number&&this.move_number<=170){ this.top=(this.move_number)/4 }else{ this.top=(this.move_number)/60+40 } clearTimeout(this.timer) this.timer = setTimeout(()=>{ this.touchmove_num=e.touches[0].clientY },500) } }, //结束 touchend(e){ console.log('-------333',e) if(this.is_refreshs||e.touches.length>=1){return} console.log('----555',this.move_number) if(this.move_number>170){ this.is_refreshs=true this.$emit('refresh') this.move_timer=setInterval(()=>{ this.rotate_number+=8 },10) }else{ this.move_timer=setInterval(()=>{ this.top-=8 if(this.top<-90){ clearInterval(this.move_timer) } },10) } }, //加载完成 endRefresh(){ this.top=-90 this.move_number=this.rotate_number=0 this.is_refreshs=false clearInterval(this.move_timer) }, } }; </script> <style lang="scss" > .refresh-body{ box-sizing: border-box; .refresh-scroll{ position: relative; height: 100%; } .refresh-icon{ width: 80upx; height: 80upx; text-align: center; line-height: 80upx; border-radius: 50%; background: #FFFFFF; box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.2); position: absolute; left: 50%; color: #00aa7f; z-index: 9999999999; display: flex; align-items: center; justify-content: center; .iconfont{ font-size: 36upx; } image{ width: 36upx; } } .content123{ height: 100%; } .t-loading-box{ display: flex; align-items: center; justify-content: center; flex-direction: row; line-height:80upx; font-size: 26upx; width: 100%; padding-bottom:20upx; color: #888888; .t-loading-text{ padding: 0 10upx; display: flex; align-items: center; flex-direction: row; } .loading { width:25upx; height:25upx; border:2.5upx solid #888888; border-bottom:#ffffff 2.5upx solid; border-radius:50%; margin-right: 15upx; animation:grace-rotate360 1200ms infinite linear; } .t-line{ margin: 0px; border-bottom: 1px solid rgb(212, 212, 212); width: 20px; transform: scaleY(0.5); border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); } } [@keyframes](/user/keyframes) grace-rotate360{0%{transform:rotate(0deg);} 50%{transform:rotate(180deg);} 100%{transform:rotate(360deg);}} </style>

### 预期结果:


希望单指下滑也可以触发touchmove

实际结果:

单指无法触发touchmove必须使用双指


### bug描述:


利用touchmove做的下拉刷新升级到3.1.22.20210709之后就不能使用了,单指下拉无反应,必须双指下滑

更多关于uni-app 更新到3.1.22之后 scroll-view 组件单指下滑不触发 touchmove 必须双指的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

更多关于uni-app 更新到3.1.22之后 scroll-view 组件单指下滑不触发 touchmove 必须双指的实战教程也可以访问 https://www.itying.com/category-93-b0.html


3.2.0 alpha 已修复

怎么更新到这个版本啊

我使用了你们的临时解决方案之后影响HB推送更新吗

回复 刘超群: 不影响。更新后会全部替换了的

回复 DCloud_UNI_LXH: 好的

在uni-app 3.1.22版本中,scroll-view组件的触摸事件处理逻辑有所调整,导致单指滑动时touchmove事件被阻止。从你的代码来看,问题主要出现在两个地方:

  1. 外层view的@touchmove.stop.prevent阻止了所有触摸事件的冒泡和默认行为
  2. scroll-view内部的事件处理逻辑需要适配新版本

解决方案:

  1. 移除外层view的touchmove阻止
<view class="refresh-body">
  1. 调整scroll-view的事件处理
<scroll-view scroll-y 
  @touchstart="touchstart" 
  @scrolltolower="loadMore" 
  @touchmove="touchmove" 
  @touchend="touchend" 
  class="refresh-scroll"
  :enhanced="true"
  :bounces="false">
  1. 修改touchmove方法
touchmove(e){
  if(e.touches.length > 1) return; // 排除多指操作
  if(!this.is_refreshs){
    this.move_number = e.touches[0].clientY - this.touchstart_num;
    this.rotate_number = this.move_number * 2;
    
    if(this.move_number < 120){
      this.top = (this.move_number)/1 - 90;
    } else if(this.move_number <= 170){
      this.top = (this.move_number)/4;
    } else {
      this.top = (this.move_number)/60 + 40;
    }
    
    clearTimeout(this.timer);
    this.timer = setTimeout(() => {
      this.touchmove_num = e.touches[0].clientY;
    }, 500);
  }
}
回到顶部