uni-app vue3 小程序 scrollview滚动时会触发其他按钮click事件

uni-app vue3 小程序 scrollview滚动时会触发其他按钮click事件

类别 信息
产品分类 uniapp/小程序/微信
PC开发环境 Windows
操作系统版本 win11
HBuilderX类型 正式
HBuilderX版本 4.57
工具版本号 1.06.2409140
基础库版本号 3.8.8
项目创建方式 HBuilderX

操作步骤：

  • 快速滚动

预期结果：

  • 不弹窗uni.showToast

实际结果：

  • 弹窗uni.showToast了

bug描述：

  • vue3 小程序 scrollview滚动时会触发其他按钮click事件

scroll-project.zip


更多关于uni-app vue3 小程序 scrollview滚动时会触发其他按钮click事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

升级到最新版本的hx试试还有没有这个问题

更多关于uni-app vue3 小程序 scrollview滚动时会触发其他按钮click事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


有，版本4.66

回复 江南好: 试试原生微信小程序有没有这个问题

回复 DCloud_UNI_JBB: 没有，我们老工程是小程序的，没有这个问题，但是用uniapp改造后就有这个问题。

回复 DCloud_UNI_JBB: 这个问题很早就有，https://ask.dcloud.net.cn/question/148599，但是里面没有解决方案

回复 江南好: OK，你先尝试在滚动的时候设置一个参数，存在这个参数不要触发click的事件临时解决一下

回复 DCloud_UNI_JBB: 好的，感谢

复现出来了 确实是个奇怪的问题 把@click="onBackTop"删了之后就不会触发了 但是不知道为啥触发其他的click事件 你先删了试试效果

我这个只是列了一部分，很多方法和弹窗都没写进来。原工程删除这个不行。

这是一个典型的滚动事件与点击事件冲突问题，在uni-app小程序开发中比较常见。

问题原因： 在小程序中，快速滚动时手指触摸屏幕的移动可能被误识别为点击事件，导致scroll-view区域内的按钮click事件被意外触发。

解决方案：

  1. 使用@touchstart替代@click
<button @touchstart="handleButton">按钮</button>
  1. 添加防抖处理
import { debounce } from 'lodash-es';

const handleButton = debounce(() => {
  uni.showToast({ title: '按钮点击' });
}, 300);
  1. 在scroll-view上添加阻止事件传播
<scroll-view 
  @touchstart="onScrollTouchStart"
  @touchend="onScrollTouchEnd"
>
  1. 使用@tap代替@click（在小程序环境中）
<button @tap="handleButton">按钮</button>
  1. 检测滚动状态
let isScrolling = false;

const onScroll = () => {
  isScrolling = true;
  clearTimeout(scrollTimer);
  scrollTimer = setTimeout(() => {
    isScrolling = false;
  }, 150);
};

const handleButton = () => {
  if (isScrolling) return;
  uni.showToast({ title: '按钮点击' });
};
回到顶部