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

Posted 2020-12-01 shaoshuai0305

　一般的，如果是静态数据（本地数据），可以直接在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就大功告成了。