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

素颜马尾好姑娘i 2022-10-12 14:53 505阅读 0赞

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

1.首先通过swiper进行页面布局  
布局成如下，可以进行左右滑动，最后一个之后显示"查看更多"，在继续滑动且超过一定范围时跳转页面。  
![在这里插入图片描述][20210705144420908.png]  
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 的右边到视口左边的距离

[20210705144420908.png]: /images/20221005/7665bd5283f046a8875eb2f75836bca4.png