- 发布：2022-07-06 10:22
- 更新：2024-11-14 17:52
- 阅读：1116
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 12.1 (21C52)
HBuilderX类型： 正式
HBuilderX版本号： 3.5.0
手机系统： 全部
手机厂商： 华为
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
<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>
<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事件
IOS端小程序比安卓端更容易复现
预期结果：
无误触
无误触
实际结果：
如视频所示，我手指一直在红色区域滑动，却会触发粉色和蓝色区域的click事件
如视频所示，我手指一直在红色区域滑动，却会触发粉色和蓝色区域的click事件
bug描述：
首先vue2没有问题
vue3问题很严重，app端偶现，小程序端很严重
当我在scrollview中做上拉加载的功能时，会出现滚动时乱触的情况，试过多款手机都能复现
bug已确认，感谢反馈，已加分。
-
-
-
-
-
回复 t***@163.com: 这边验证 上述测试工程，HBuilderX 3.8.3，微信开发者工具 Stable 1.06.2303220，iphoneX 真机运行 已不存在上述问题
2023-06-01 20:14
-
-
回复 DCloud_UNI_WZF: 我把@scroll去掉就没问题了，@scroll绑定的事件里面有个控制标签显隐的变量，当这个变量从false变成true，也就是标签显示（v-if）的时候，会触发里面的点击事件，大致是true（刚开始是隐藏的）->false->true(必触发click事件)
2023-09-06 14:40
-
johon
我也遇到了，就是滚动的时候，会触发其他点击事件，触发有一定的随机性，找不到规律
2024-10-21 17:44
DCloud_UNI_WZF
提供下开发环境、测试工程及复现步骤，谢谢
2024-10-23 15:32
1***@163.com
你解决了吗 我也遇到这个问题了
2024-11-14 17:53
1***@163.com
回复 johon: 老师你解决了吗? 我也遇到同样的问题了
2024-11-14 17:53
1***@163.com
回复 johon: 老师 我也碰到这个问题了 页面滑动时,点击事件随机触发 哪怕是不在scroll-view中的点击事件也触发了
2024-11-14 18:02
1***@163.com
老师你是怎么解决的 我这也遇到同样的问题了 页面滑动时,点击事件随机触发 哪怕是不在scroll-view中的点击事件也触发了
2024-11-14 18:02