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);
        }
      },
           

個人解決方案，如有更有方案，可告知。

記錄一下~