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

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

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

附上代码：

<van-swipe class="banner" :loop="true" :height="height" @change="onChange">
      <van-swipe-item 
        v-for="(item, index) in banner" 
        :key="index" 
        @touchstart="onTouchStart" 
        @touchmove="onTouchMove" 
        @touchend="onTouchEnd(index)"
      >
        <img :src="item" class="swiper-img"/>
      </van-swipe-item>
      <div class="custom-indicator" slot="indicator">
        {{ current + 1 }}/{{banner.length}}
      </div>
    </van-swipe>

// 用于判断滑动还是点击
      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);
        }
      },

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

---

记录一下~