本文讲述了如何在前端使用Swiper实现卡片滑动，通过监听touchMove和touchEnd事件，精确判断是否达到跳转条件。遇到的挑战包括惯性滑动问题和freeMode设置对滑动效果的影响。关键知识点包括元素位置计算和free模式调整。
最近PM提出了这样的一个需求，卡片可以横向滑动，当滑动到最后一个卡片，且还在滑动时，要跳转到另一个页面。这是就需要把握一个范围，当超过这个范围时，就进行跳转，否则不跳转。
1.首先通过swiper进行页面布局
布局成如下，可以进行左右滑动，最后一个之后显示"查看更多"，在继续滑动且超过一定范围时跳转页面。
2.swiper监听事件，touchMove：触摸滑动时触发；touchEnd：触摸结束后触发。在事件触发时判断"查看更多"元素离视口左侧的距离，如果小于屏幕宽度，证明该元素已经全部显示，文案提示变成"我要跳转页面啦"，此时松手应该跳转页面；反之显示"查看更多"。
on: {
// touchmove事件，判断 查看更多的提示 的右边到视口左边的距离 进行文案修改
touchMove: () => {
const swiperTip = this
扫一扫
3305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
