码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-11-01 18:55:38      阅读:103      评论:0      收藏:0      [点我收藏+]

标签:怎么   strong   ref   data-   点击   动态绑定   解决   循环播放   路径   

 一般的,如果是静态数据(本地数据),可以直接在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以及点击事件

标签:怎么   strong   ref   data-   点击   动态绑定   解决   循环播放   路径   

原文地址:https://www.cnblogs.com/shaoshuai0305/p/11778447.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!