swiper 组件实现 滑动到最后一个 slide 后，再次滑动触发跳转事件

该代码只测试了移动端 其他端原理应该相同

技术栈

• swiper 6.x
• vue 2.x
• ts

思路

借助 swiper 提供的 touch 事件

1. 当用户按下屏幕时，通过 touchStart 记录起始的位置
2. 通过 touchMove 不断更新坐标点，并判定是否到达可执行操作的临界点
3. 用户松手触发 touchEnd 事件，在这里面通过（方向，是否是最后一个，是否到达临界点）这些条件判断是否执行用户代码段

核心代码

  /**
   * 是否到最后一个 slide 了
   */
  isEnd: boolean = false;

  /**
   * 手指开始点击的位置 x 坐标
   */
  touchStartX: number = 0;

  /**
   * 用户手指移动时的 x 坐标，touch-move 事件会不停修改该值
   */
  touchMovingX: number = 0;

  /**
   * 是否到达可跳转的距离
   */
  get isArrive(): boolean {
    return Math.abs(this.touchMovingX - this.touchStartX) > 100;
  }

  mounted() {
    this.$nextTick(this.initSwiper);
  }
  
  initSwiper() {
    new Swiper(this.$refs.miniVideo as HTMLElement, {
      slidesPerView: 'auto',
      on: {
        touchStart: (swiper, event) => {
          this.isEnd = swiper.isEnd;
          this.touchStartX = event.targetTouches[0].pageX;
        },
        touchMove: (_, event) => {
          this.touchMovingX = event.targetTouches[0].pageX;
        },
        touchEnd: (swiper, event) => {
          let touchX = event.changedTouches[0].pageX;
          // 判断用户滑动的方向
          const isLeft = touchX - this.touchStartX < 0;
          if (this.isEnd && isLeft && this.isArrive) {
              this.touchStartX = 0
              this.touchMovingX = 0
              // 执行用户代码段 ...
          }
        }
      }
    });
  }