vue使用vant轮播图时,无法判断是点击还是滑动问题解决方案

有时候,我们需要在轮播图中添加点击事件,但是,在手机端,如果直接使用click事件,点击和滑动都会触发click。

为了解决这个问题,这里了我使用了@touchstart 、@touchmove、@touchend三个事件。用来判断是点击还是滑动操作。

附上代码:

vue使用vant轮播图时,无法判断是点击还是滑动问题解决方案_第1张图片

vue使用vant轮播图时,无法判断是点击还是滑动问题解决方案_第2张图片

// 用于判断滑动还是点击
      onTouchStart (e) {
        // this.clickIndex = 0; // 为了兼容安卓部分情况而加,如果不需要可忽略
        this.clickFlag = false;
      },
      // 用于判断滑动还是点击
      onTouchMove (e) {
        this.clickFlag = true;
        // 为了兼容安卓部分情况而加的判断,如果不需要可忽略,若需要,注释上面一行代码,打开下面三行代码
        // this.clickIndex = this.clickIndex + 1;
        // if (this.clickIndex > 2) {
        //   this.clickFlag = true;
        // }
      },
      onTouchEnd (position) {
        if (this.clickFlag) { // 滑动
          // console.log('滑动');
        } else { // 点击
          // console.log('点击');
          this.handleShowPic(position);
        }
      },

个人解决方案,如有更有方案,可告知。


记录一下~

你可能感兴趣的:(vue)