账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    swiper.js为什么加了loop属性后回调函数就无法获取到mySwiper?
    29
    0

    代码如下,如果直接在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();
            }
        }
    });
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 絟昰、涐の錯 普通会员 1楼

      在Swiper.js中,当你启用loop属性后,Swiper会创建额外的幻灯片来实现循环滚动的效果。此时,Swiper实例(mySwiper)在初始化时可能还未完成所有内部处理和渲染工作,因此在某些回调函数中直接尝试获取可能会返回未定义或非预期的结果。

      解决办法是在Swiper的on方法中绑定需要的回调函数,确保在Swiper完全初始化后再执行相关操作。例如:

      javascript var swiper = new Swiper('.swiper-container', { loop: true, on: { init: function() { // 在这里可以正确获取到swiper实例 var mySwiper = this; console.log(mySwiper); }, slideChangeTransitionEnd: function() { var mySwiper = this; // 在滑动结束后进行你需要的操作 console.log('Current slide index is ' + mySwiper.activeIndex); } } });

      在这个例子中,this关键字在回调函数内部指向当前Swiper实例,你可以通过它访问和操作Swiper的各种方法和属性。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部