Vue+Swiper 滑动到最后一个卡片时继续滑动跳转页面

最近PM提出了这样的一个需求，卡片可以横向滑动，当滑动到最后一个卡片，且还在滑动时，要跳转到另一个页面。这是就需要把握一个范围，当超过这个范围时，就进行跳转，否则不跳转。

1.首先通过swiper进行页面布局 布局成如下，可以进行左右滑动，最后一个之后显示"查看更多"，在继续滑动且超过一定范围时跳转页面。 2.swiper监听事件，touchMove：触摸滑动时触发；touchEnd：触摸结束后触发。在事件触发时判断"查看更多"元素离视口左侧的距离，如果小于屏幕宽度，证明该元素已经全部显示，文案提示变成"我要跳转页面啦"，此时松手应该跳转页面；反之显示"查看更多"。

on: {
          
   
  // touchmove事件，判断 查看更多的提示 的右边到视口左边的距离 进行文案修改
  touchMove: () => {
          
   
    const swiperTip = this.$refs.moreSlide;
    if (swiperTip.getBoundingClientRect().right < this.clientWid) {
          
   
      this.seeMore = "我要跳转页面啦";
    } else {
          
   
      this.seeMore = "查看更多";
    }
  },
    // touchend事件，判断 查看更多的提示 的右边到视口左边的距离 进行页面跳转
    touchEnd: () => {
          
   
      const swiperTip = this.$refs.moreSlide
      if (swiperTip.getBoundingClientRect().right < this.clientWid) {
          
   
        console.log("这是跳转页面的方法")
      }
    },
}

3.踩坑记录 记录一：touchMove事件中添加了if else的判断之后，整个swiper会左右晃动几次

swiper默认freeMode是false，即普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动可能不止一格且不会贴合。

记录二：freeMode设为true后，会根据惯性滑动，如果我触摸结束后，不满足页面跳转的条件，但是惯性滑动后满足了，此时页面并没有跳转

惯性滑动结束后会触发slideChangeTransitionEnd事件

记录三：设置resistanceRatio为0，无法脱离边缘，但是惯性滑动时还会脱离边缘

freeModeMomentumBounce: false，禁用free模式下的动量反弹，slides通过惯性滑动到边缘时，无法反弹

4.知识点记录

let domToTop = dom.getBoundingClientRect().top   // dom 的顶边到视口顶部的距离
let domToLeft = dom.getBoundingClientRect().left   // dom 的左边到视口左边的距离
let domToBottom = dom.getBoundingClientRect().bottom  // dom 的底边到视口顶部的距离
let domToRight = dom.getBoundingClientRect().right  // dom 的右边到视口左边的距离