c***@guiyun.com
c***@guiyun.com
  • 发布:2022-07-06 10:22
  • 更新:2023-05-04 17:08
  • 阅读:770

【报Bug】Vue3在scroll-view中快速滚动会触发click事件,急需修复

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 12.1 (21C52)

HBuilderX类型: 正式

HBuilderX版本号: 3.5.0

手机系统: 全部

手机厂商: 华为

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

iphone xs max 魅族e3

示例代码:
<template>  
	<view>  
		<scroll-view :scroll-y="true" :show-scrollbar="false" style="padding-top:88rpx;height: 80vh;background-color: #f8f8f8;"  
			@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" @scrolltolower="loadmorefun"  
			@scroll="scroll">  
			<!-- 数据展示区域 -->  
  
			<view class="demo " style="display: flex;" v-for="(item, idx) in demoData" :key="idx">  
				<view @click="clickBlock('粉色'+item)" style="background-color: pink;flex: 1;">  
					粉{{item}}  
				</view>  
				<view @click="clickBlock('蓝色'+item)" style="background-color: blue;flex: 1;">  
					蓝{{item}}  
				</view>  
				<view @click="clickBlock('红色'+item)" style="background-color: red;flex: 1;">  
					红{{item}}  
				</view>  
			</view>  
  
			<!-- 加载组件 -->  
			<!-- <gui-loadmore ref="loadmorecom" :status="1"></gui-loadmore> -->  
		</scroll-view>  
	</view>  
</template>  
<script>  
	// 模拟数据  
	var data = [1, 2, 3, 4, 5, 6, 7, 8];  
	// 模拟页码  
	var page = 1;  
	export default {  
		onLoad: function() {  
			this.getdata();  
		},  
		data() {  
			return {  
				// 滚动区域滚动距离  
				scrollTop: 0,  
				// 核心数据  
				demoData: [],  
				loadMoreTimer: null,  
				// 用于记录是否有 api 请求正在执行  
				apiLoadingStatus: false  
			}  
		},  
  
		methods: {  
			clickBlock(txt) {  
				uni.showToast({  
					title: "点击了" + txt,  
					icon: 'none'  
				})  
			},  
			scroll: function(e) {  
				this.scrollTop = e.detail.scrollTop;  
			},  
			// 下拉刷新相关事件绑定  
			touchstart: function(e) {  
				if (this.apiLoadingStatus) {  
					return;  
				}  
				if (this.scrollTop > 10) {  
					return;  
				}  
				// this.$refs.refreshcom.touchstart(e);  
			},  
			touchmove: function(e) {  
				if (this.apiLoadingStatus) {  
					return;  
				}  
				if (this.scrollTop > 10) {  
					return;  
				}  
				this.$refs.refreshcom.touchmove(e);  
			},  
			touchend: function(e) {  
				if (this.apiLoadingStatus) {  
					return;  
				}  
				if (this.scrollTop > 10) {  
					return;  
				}  
				this.$refs.refreshcom.touchend(e);  
			},  
			// 刷新事件  
			reload: function() {  
				if (this.apiLoadingStatus) {  
					return;  
				}  
				page = 1;  
				this.getdata(true);  
				// 刷新时重置加载组件状态  
				// this.$refs.loadmorecom.stoploadmore();  
			},  
			// 加载更多事件  
			loadmorefun: function() {  
				console.log("loadmorefun", this.apiLoadingStatus)  
				if (this.apiLoadingStatus) {  
					return;  
				}  
				// 保证触底只执行一次加载  
				if (this.loadMoreTimer != null) {  
					clearTimeout(this.loadMoreTimer);  
				}  
				this.loadMoreTimer = setTimeout(() => {  
					// 校验加载组件状态  
					// if (this.$refs.loadmorecom.loadMoreStatus != 0) {  
					// 	return;  
					// }  
					// this.$refs.loadmorecom.loading();  
					// 此处开启加载动画执行加载数据的函数  
					this.getdata();  
				}, 80);  
			},  
			// 数据加载函数  
			// isReload 函数用于识别是不是下拉刷新执行的  
			getdata: function(isReload) {  
				this.apiLoadingStatus = true;  
				console.log('加载函数运行,页码 : ' + page);  
				// 模拟 api 请求刷新数据  
				setTimeout(() => {  
					var demoArr = data;  
					if (page >= 2) {  
						this.demoData = this.demoData.concat(demoArr);  
						// 加载完成后停止加载动画  
						// this.$refs.loadmorecom.stoploadmore();  
						// 假定第3页加载了全部数据,通知组件不再加载更多  
						// 实际开发由接口返回值来决定  
						if (page >= 300) {  
							// this.$refs.loadmorecom.nomore();  
						}  
					}  
					// 第一页 有可能是第一次加载或者刷新  
					else {  
						this.demoData = [];  
						this.demoData = demoArr;  
						this.pageLoading = false;  
						// 刷新  
						if (isReload) {  
							// this.$refs.refreshcom.endReload();  
						}  
						// 加载完成后停止加载动画  
						// this.$refs.loadmorecom.stoploadmore();  
					}  
  
					page++;  
					this.apiLoadingStatus = false;  
				}, 100);  
			}  
		}  
	}  
</script>  
<style scoped>  
	.demo {  
		margin: 30rpx;  
		line-height: 200rpx;  
	}  
</style>  

操作步骤:

如视频所示,我手指一直在红色区域滑动,却会触发粉色和蓝色区域的click事件

IOS端小程序比安卓端更容易复现

预期结果:

无误触

实际结果:

如视频所示,我手指一直在红色区域滑动,却会触发粉色和蓝色区域的click事件

bug描述:

首先vue2没有问题

vue3问题很严重,app端偶现,小程序端很严重

当我在scrollview中做上拉加载的功能时,会出现滚动时乱触的情况,试过多款手机都能复现

2022-07-06 10:22 负责人:DCloud_UNI_WZF 分享
已邀请:
DCloud_UNI_WZF

DCloud_UNI_WZF

bug已确认,感谢反馈,已加分。

  • 同名自定义

    其实我早发现了。我一直没有提。是因为我提的太多bug。怕你们修复不来。哈哈


    2022-07-06 12:23

  • c***@guiyun.com (作者)

    下个版本修复下哈,已经严重影响到线上环境正常使用了,感谢


    2022-07-06 13:02

  • c***@guiyun.com (作者)

    这么致命的bug,能优先修复下吗,等了三个月了


    2022-10-31 13:47

  • t***@163.com

    2023年了 还没修复吗


    2023-06-01 16:56

  • DCloud_UNI_WZF

    回复 t***@163.com: 这边验证 上述测试工程,HBuilderX 3.8.3,微信开发者工具 Stable 1.06.2303220,iphoneX 真机运行 已不存在上述问题


    2023-06-01 20:14

  • 7***@qq.com

    回复 DCloud_UNI_WZF: 还是有这个bug,真机也有,开发工具已经是最新的了


    2023-09-06 14:19

  • 7***@qq.com

    回复 DCloud_UNI_WZF: 我把@scroll去掉就没问题了,@scroll绑定的事件里面有个控制标签显隐的变量,当这个变量从false变成true,也就是标签显示(v-if)的时候,会触发里面的点击事件,大致是true(刚开始是隐藏的)->false->true(必触发click事件)


    2023-09-06 14:40

  • 7***@qq.com

    回复 DCloud_UNI_WZF: 微信开发者工具版本1.06.2306020,hbuildx:3.8.12


    2023-09-06 14:42

5***@qq.com

5***@qq.com

这个问题已经修复了吗?

DCloud_UNI_WZF

DCloud_UNI_WZF

请验证下 HBuilderX 3.6.14 是否存在该问题,这边测试滑动过程不会触发 click

  • 2***@qq.com

    我也遇到同样的问题,我的版本是3.6.18


    2023-05-04 16:05

2***@qq.com

2***@qq.com

请问得到解决了吗,我也遇到了同样的问题

  • DCloud_UNI_WZF

    是否最新版本HBuilderX? 上面的测试工程这边测试没有问题了,如确认框架问题,附件提供下你的测试工程,谢谢


    2023-05-09 14:38

朱小

朱小

不是不小心点到了吗,哈哈

要回复问题请先登录注册