有时候,我们需要在轮播图中添加点击事件,但是,在手机端,如果直接使用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);
        }
      },

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


记录一下~

Logo

前往低代码交流专区

更多推荐