uni-app scroll-view 和 swiper 滑动触摸击穿问题，滑动放手后触发了里面的click事件

详细问题描述

scroll-view 和 swiper 滑动触摸击穿，子组件view添加了click事件，滑动放手后触发了里面的click事件

重现步骤

<scroll-view scroll-x="true" class="tab-scroll" scroll-with-animation>  
<view >  
    <view class="li" v-for="tab in tabList" @click.stop="changeTab(tab)">  
        <text class="text">{{tab.cat_name}}</text>  
        <text class="line"></text>  
    </view>  
</view>                       
</scroll-view>  
// 这个是左右滑动，swiper 的左右滑动也是一样会击穿

IDE运行环境说明

环境	说明
win

uni-app运行环境说明

环境	说明
H5
创建方式	cli 创建
版本号	2.0.0-24220191115008

更多关于uni-app scroll-view 和 swiper 滑动触摸击穿问题，滑动放手后触发了里面的click事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

itying888 1楼

解决了，哪个坑货给我加了个 fastclick 插件，删掉就好了

更多关于uni-app scroll-view 和 swiper 滑动触摸击穿问题，滑动放手后触发了里面的click事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

caililin 2楼

这是一个常见的滑动与点击事件冲突问题。解决方案有以下几种：

使用@touchstart和@touchend替代@click事件，通过判断滑动距离来区分是滑动还是点击：

<view [@touchstart](/user/touchstart)="handleTouchStart" 
      [@touchend](/user/touchend)="handleTouchEnd">
</view>

使用@tap事件替代@click（在H5环境下可能需要引入fastclick库）：

<view [@tap](/user/tap)="changeTab(tab)"></view>

在滑动容器上添加@scroll事件，滑动时设置标志位：

data() {
  return {
    isScrolling: false
  }
},
methods: {
  handleScroll() {
    this.isScrolling = true
    clearTimeout(this.scrollTimer)
    this.scrollTimer = setTimeout(() => {
      this.isScrolling = false
    }, 300)
  },
  changeTab(tab) {
    if(this.isScrolling) return
    // 正常逻辑
  }
}