2022-07-08 工作记录--Swiper-在第一页继续向前拖动则toast提示 + 在最后一页继续向后拖动则跳转页面【yyds】

一、前言

真滴太太太太激动啦~✌🏻
查看官网API加上百度查阅资料📚，都没有发现解决方法滴问题，经过小杨同学的多方尝试（甚至昨晚凌晨闭着眼睛准备休息时，一想到这个问题 就睡不着 爬起来继续换方法解决，导致今天眼睛痛还请假了。。。），终于皇天不负有心人，成功发现一种简单滴解决方法耶，好开心喔 ~

二、实现效果

三、实现方法及代码【以react为例】

第一步、安装swiper

实现图片轮播，我安装的是swiper3版本，版本根据需求选择即可。

「React-swiper的运用 可查看我的另外一篇博客」

npm i swiper@3 

或者

 yarn add swiper@3

第二步、到package.json里去判断是否安装成功

第三步、对应代码

其他swiper相关细节的代码就不多说了哈，感兴趣的朋友可移驾查看我的另外一篇博客喔~

我们直接把解决标题「Swiper-在第一页继续向前拖动则toast提示 + 在最后一页继续向后拖动则跳转页面」的代码搬出来咯~小萝卜儿们请往下看👁

// 初始化swiper
swiper = new Swiper('.swiper-container1', {
    direction: 'vertical', // 垂直方向

    onTouchEnd: function (swiper, event) { // 回调函数，当释放slider时执行。
        let t1 = swiper.translate;
        setTimeout(
            function () {
                // console.log(swiper);
                let t2 = swiper.translate;
                
                console.log(t1);
                console.log(t2);
                // 判断slide「上滑」、「下拉」、「点击」
                // if (t1 < t2) {
                //     console.log('上滑');
                // } else if (t1 > t2) {
                //     console.log('下拉');
                // } else {
                //     console.log('点击');
                // }
                
                // [注释：t1 > t2表示“下拉”，swiper.isBeginning为true 表示“位于第一页”]
                if (t1 > t2 && swiper.isBeginning) { // 在第一页继续向前拖动则toast提示
                    // console.log('下拉');
                    // Toast('您已经处于第一页,向上滑动没有内容咯～', 1000);
                    Toast('精彩内容已为你呈现咯，请往下滑动选择喔~', 1000);
                }
                // [注释：t1 < t2表示“上滑”，swiper.isEnd为true 表示“位于最后一页”]
                if (t1 < t2 && swiper.isEnd) { // 在最后一页继续向后拖动则toast提示
                    // console.log('上滑');
                    // Toast('您已经处于最后一页,向下滑动没有内容咯～', 1000);
					window.location.href="http://www.baidu.com";
                 }
            }, 30);
    }
});

注意：我用的是swiper3版本哦，其他版本对应API去 swiper官网 查看即可喔~