vue-awesome-swiper之横向滑动最后一张跳走

背景

我们平常开发需求的时候，会遇到一种业务场景，卡片横向滑动，滑动到最后一张的时候，再用力滑动直接跳走。

技术选型

因为 swiper 跟 APP的横向滑动手势不冲突，所以选择了vue-awesome-swiper

code

"vue-awesome-swiper": "^3.1.3",

1. 一开始，使用的slideChange 没成功，失败了activeIndex 这个不是很准确呀
2. touchEnd 成功方案

import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
    data () {
        return {
            swiperOption: {
                slidesPerView: 'auto',
                isAndroid: false
            },
        }
    },
    mounted () {
        /* 触发最后一个 跳转功能 */
        this.initSwiperContent();
    },
    methods: {
        /* 触发最后一个 跳转功能 */
        initSwiperContent () {
            const self = this;
            const swiper = (this.$refs.mySwiper || {}).swiper;
            if (!swiper) {
                return;
            }
            // 尝试方案，这个没成功，
            swiper.on('slideChange',function(){
                /* 这个不是很准确 */
                self.activeIndex = this.activeIndex;
            });
            // 解决方案
            swiper.on('touchEnd', () => {
                // 事件触发阈(yù)值,数值越大需要拖动触发事件的距离也就越大
                const threshold = 100;

                const { left, width } = document.getElementById(`swiper_item_${self.swiperList.length-1}`).getBoundingClientRect();
                const distance = window.innerWidth - (left + width);
                if(distance > threshold) {
                       // 跳转操作
                       location.href = "xxxx";
                }
            });
        },
    }
}

<swiper
    ref="mySwiper"
    :options="swiperOption"
>
    <swiper-slide
        v-for="(item, index) in swiperList"
        :id="`swiper_item_${index}`"
        :key="index"
        class="card-wrap-box"
        @click.native="callOther"
    >
        <!-- 内容部分-->
    </swiper-slide>
</swiper>