H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】swiper.js为什么加了loop属性后回调函数就无法获取到mySwiper?

代码如下,如果直接在onSlideChangeEnd里面使用mySwiper,就会出现mySwiper is undefined的报错。
但如果加入了定时器,则不会出现这个情况。而且不加loop属性也不会出现,请问为什么?

mySwiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    resistanceRatio: 0,
    loop: true,
    onSlideChangeEnd: function () {
        setTimeout(() => {
            var i = mySwiper;
            console.log(i)
        }, 10);
        $(".swiper-slide").each(function () {
            if ($(this).hasClass("swiper-slide-active")) { // 当前页显示,其余页隐藏
                $(this).children().show();
                $(this).siblings().children().hide();
            }
        });
        if (i == $('.swiper-slide').length - 1) { // 最后一页不提示滑动
            $(".arrow").hide();
        } else {
            $(".arrow").show();
        }
    }
});

回答:

initialSlide:非0和loop:true都会导致这种情况
说一下执行流程
new Swiper() -> init -> slideTo(initialSlide)
初始化会进行一次默认的跳转 在slideTo中会对位置进行判断如果是第一个就return
而设置了loop你的第一个位置实际上不是第一个 所以位置判断会继续走 进行跳转 会触发Transition/SlideChange方法

2种方法

  1. runCallbacksOnInit: false runCallbacksOnInit就是来专门处理这种情况的如果你不想这个初始化的一次
  2. onSlideChangeEnd(s) 有个参数就是swiper实例

本文地址:H5W3 » 【Web前端问题】swiper.js为什么加了loop属性后回调函数就无法获取到mySwiper?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址