uni-app scroll-view在y轴滚动的情况下点击事件很难触发
uni-app scroll-view在y轴滚动的情况下点击事件很难触发
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Mac | 11.6 | HBuilderX |
| HBuilderX | 3.3.13 | |
| 手机系统 | 版本号 | |
| iOS | iOS 14 | |
| 手机厂商 | ||
| 苹果 | ||
| 手机机型 | ||
| iphone12 | ||
| 页面类型 | vue | |
| vue版本 | vue2 | |
| 打包方式 | 云端 |
操作步骤：
- 点击scroll-view中的view
预期结果：
- 能触发tap事件
实际结果：
- 基本一半触发不了，经常一直点好几下才触发
bug描述：
scroll-view为y轴滚动时，点击事件很难触发，基本点击有一半触发不了，x轴的都没问题点击事件都能触发
3 回复
安卓是否正常？用示例代码hello uni-app能出现你的问题吗？不能的话请排查下具体问题，并提供可复现bug的最小化demo（上传附件），让我们及时定位问题，及时修复
【bug优先处理规则】https://ask.dcloud.net.cn/article/38139
经过测试，列表渲染并且列表绑定了点击事件，scroll-view在列表渲染过程中就会点击不了，只有列表渲染完才能点击，安卓没有这个问题，只有ios有这个问题，代码demo上传附件了
在 uni-app 中使用 scroll-view 组件时，如果 scroll-view 在 y 轴方向上滚动，点击事件可能难以触发。这是因为 scroll-view 的默认行为是优先处理滚动事件，而不是点击事件。以下是一些解决方案：
1. 使用 @touchstart 和 @touchend 事件
你可以使用 @touchstart 和 @touchend 事件来模拟点击事件。通过记录触摸开始和结束的时间差来判断是否为点击事件。
<template>
<scroll-view
scroll-y
@touchstart="handleTouchStart"
@touchend="handleTouchEnd"
>
<!-- 内容 -->
</scroll-view>
</template>
<script>
export default {
data() {
return {
touchStartTime: 0,
};
},
methods: {
handleTouchStart() {
this.touchStartTime = Date.now();
},
handleTouchEnd() {
const touchEndTime = Date.now();
if (touchEndTime - this.touchStartTime < 200) {
this.handleClick();
}
},
handleClick() {
// 处理点击事件
console.log('点击事件触发');
},
},
};
</script>2. 使用 @tap 事件
uni-app 提供了 @tap 事件，它可以在 scroll-view 中更好地处理点击事件。
<template>
<scroll-view scroll-y @tap="handleClick">
<!-- 内容 -->
</scroll-view>
</template>
<script>
export default {
methods: {
handleClick() {
// 处理点击事件
console.log('点击事件触发');
},
},
};
</script>3. 使用 [@click](/user/click) 事件并设置 scroll-with-animation
你可以尝试使用 [@click](/user/click) 事件，并设置 scroll-with-animation 为 false，这样可以减少滚动动画对点击事件的影响。
<template>
<scroll-view scroll-y scroll-with-animation="false" [@click](/user/click)="handleClick">
<!-- 内容 -->
</scroll-view>
</template>
<script>
export default {
methods: {
handleClick() {
// 处理点击事件
console.log('点击事件触发');
},
},
};
</script>4. 使用 [@click](/user/click) 事件并设置 scroll-top
你可以在点击事件中设置 scroll-top 的值，强制 scroll-view 停止滚动，从而触发点击事件。
<template>
<scroll-view scroll-y :scroll-top="scrollTop" [@click](/user/click)="handleClick">
<!-- 内容 -->
</scroll-view>
</template>
<script>
export default {
data() {
return {
scrollTop: 0,
};
},
methods: {
handleClick() {
this.scrollTop = this.scrollTop === 0 ? 1 : 0;
// 处理点击事件
console.log('点击事件触发');
},
},
};
</script>5. 使用 [@scroll](/user/scroll) 事件
你可以在 [@scroll](/user/scroll) 事件中判断是否停止滚动，然后在停止滚动时触发点击事件。
<template>
<scroll-view scroll-y [@scroll](/user/scroll)="handleScroll" [@click](/user/click)="handleClick">
<!-- 内容 -->
</scroll-view>
</template>
<script>
export default {
data() {
return {
isScrolling: false,
};
},
methods: {
handleScroll() {
this.isScrolling = true;
clearTimeout(this.scrollTimeout);
this.scrollTimeout = setTimeout(() => {
this.isScrolling = false;
}, 200);
},
handleClick() {
if (!this.isScrolling) {
// 处理点击事件
console.log('点击事件触发');
}
},
},
};
</script>