解决vue中使用swiper 同时设置loop和slidesPerView时 点击事件失效问题

文章目录

前言

在实际运用swiper轮播图插件时，有时会出现需要同时使用

loop: true

和

slidesPerView: ‘auto’

两种属性的情况，前者代表开启循环模式，后者代表slider容器能够同时显示的slides数量(carousel模式)。

此时，会出现点击事件失效问题，主要原因是

loop: true

会产生复制的slide，而在“假的”slide上正常绑定的点击事件无法生效。

一、swiper - loop原理

参考链接：Swiper中文网 - loop

二、swiper - slidesPerView属性解释

参考链接：Swiper中文网 - carousel

三、解决方法

1. HTML部分

<divclass="carousel"><swiperref="noticeSwiper":options="swiperOptions"><swiper-slidev-for="(item, i) in list.notice":key="i"><divclass="title"><span>{{ item.title }}</span></div><span>{{ item.createdTime }}</span></swiper-slide></swiper></div>

2. data部分

let vm =nullexportdefault{// etc.}

data(){return{list:{notice:[],// 列表}swiperOptions:{direction:'vertical',height:52,slidesPerView:2,loopedSlides:4,// 在loop模式下使用slidesPerView，还需使用该参数设置所要用到的loop个数(一般设置大于可视slide个数2个即可)observer:true,// 改变swiper样式时，自动初始化swiperobserveParents:true,// 监测swiper父元素，如果有变化则初始化swiperautoplay:{delay:3000,disableOnInteraction:false,},loop:true,on:{tap:function(){// 这里有坑，需要注意的是：// this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 vm，来调用 methods 里的方法let initIndex =this.clickedIndex -this.activeIndex +this.realIndex
                    let index = initIndex === vm.list.notice.length ?0: initIndex
                    vm.toNoticeDetail(index)},},}}}

computed:{noticeSwiper(){returnthis.$refs.noticeSwiper.$swiper
    },}

3. 方法部分

methods:{toNoticeDetail(index){// 示例：查看详情this.$router.push({path:'/contentDetail',query:{id:this.list.notice[index].id,// 通过index获取数据},})},}

created(){
     vm =this}

总结

在vue中使用swiper，同时设置loop和slidesPerView时，解决点击事件失效问题的关键，在于获取真实的

index

以及设置

loopedSlides

属性。