swiper在vue项目中的循环轮播bug以及点击事件

　　一般的，如果是静态数据（本地数据），可以直接在mounted生命周期中初始化，循环轮播、自动播放都比较正常。

　　但是，如果是动态从后台获取数据的话，采用上述方法会发现，轮播图无法自动播放，也无法拖拽。

　　解决办法：在从后台获取完数据之后再初始化swiper，同时启动动态检查器observer，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper，默认是false。这时候使用autoplay开启自动播放是可以的，

　　然而当加上loop让其循环播放时，会发现是有问题的。如果不要循环播放的话，上述方法勉强可行，但是如果想要自动播放与循环轮播同时生效的话，还得另寻他法。

　　解决方法：在获取完数据后，将swiper放在$nextTick下一个UI帧再初始化。

this.$nextTick(() => { // 下一个UI帧再初始化swiper

    this.initSwiper();

});

　　然后在initSwiper方法中，完成swiper初始化，如：

initSwiper () {

    const _this = this

    var mySwiper = new Swiper ('.swiper-container1', {

        loop: true,

        autoplay:true,

        observer:true,

        observeParents:true,//修改swiper的父元素时，自动初始化swiper

        autoplay: {

        　　disableOnInteraction: false,   // 手动滑动后继续自动播放

    　　 },

        // 如果需要分页器

        pagination: {

         el: '.swiper-pagination',

        }

    })

}

　　可以发现，现在这样是可以了，能够自动播放，也能循环播放，手指滑动后还能继续自动播放。

　　然而，如果我想点击banner，根据不同路径跳转到不同的页面，这个该怎么实现呢？第一想法肯定是在swiper-slide上绑定click事件，通过click事件获取跳转路径的同时完成页面跳转，本来是没啥大问题的，但是在循环轮播的情况下，第一次播放完毕，进行第二次播放的时候，点击第一个banner，会发现并没有获取到跳转路径，也就是说点击事件失效了。

　　查找了下问题所在，发现在 loop 开启的时候，dom 绑定事件是有问题的。因为在loop模式下slides前后会复制若干个slide，从而形成一个环路，但是却不会复制绑定在dom上的click事件。

　　这时候我想到了swiper中的回调函数，click事件，那么上面的initSwiper事件就成这样了。

initSwiper () {

    const _this = this

    var mySwiper = new Swiper ('.swiper-container1', {

        loop: true,

        autoplay:true,

        on:{

        click: function(e){

        let url = e.target.dataset.jumpurl // jumpurl是在swiper-slide中动态绑定的data-jumpUrl属性，值是从后台获取的跳转链接

        _this.bannerJump(url)

        },

    },

    observer:true,

    observeParents:true,//修改swiper的父元素时，自动初始化swiper

    autoplay: {

        disableOnInteraction: false,

    },

        // 如果需要分页器

    pagination: {

        el: '.swiper-pagination',

    }

    })

}

　　然后添加bannerJump事件：

bannerJump (url) {

    window.location.href = url

}

　　到这里，一个自动播放、循环轮播、点击跳转的banner就大功告成了。

巴特西

swiper在vue项目中的循环轮播bug以及点击事件

最新文章

热门文章