- 最近做了一个项目用了vue-awesome-swiper这个组件，遇到了一个问题。
就是vue引入swiper后，使用loop循环，然后给每个swiper-slide滑块绑定事件@click='fn()' ,由于是循环模式，swiper会复制两份swiper-slide滑块做循环的效果，但是这两份复制的滑块点击效果无效，其它的正常。
废话不多说 上代码
-
问题代码
image.png
这是把点击事件绑定在dom上
在 loop 开启的时候，dom 绑定事件是有问题的。因为在loop模式下slides前后会复制若干个slide，从而形成一个环路，但是却不会复制绑定在dom上的click事件。
因此只能使用 swiper 提供的 api 方法进行解决
解决方案
-
html
image.png - js
<script>
import {
swiper,
swiperSlide
} from "vue-awesome-swiper";
var vm = null;
export default {
data() {
return {
swiperOption: {
notNextTick: true,
//循环
loop: true,
//设定初始化时slide的索引
initialSlide: 0,
//自动播放
autoplay: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
// 设置轮播
effect: '',
//滑动速度
speed: 800,
//滑动方向
direction: 'horizontal',
//小手掌抓取滑动
// grabCursor : true,
//滑动之后回调函数
on: {
slideChangeTransitionEnd: function() {
console.log(this.activeIndex);
//切换结束时，告诉我现在是第几个slide
// const realIndex = this.activeIndex;
// vm.carousel(realIndex);
},
click: function() {
// 这里有坑，需要注意的是：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 vm，来调用 methods 里的方法
// console.log(this); // -> Swiper
// 当前活动块的索引，与activeIndex不同的是，在loop模式下不会将 复制的块 的数量计算在内。
console.log('ss'+this.realIndex)
const realIndex = this.realIndex;
vm.carousel(vm.carousels[realIndex]);
}
},
//左右点击
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev',
// },
//分页器设置
pagination: {
el: '.swiper-pagination',
clickable: true
}
},
swiperSlides: [1, 2, 3, 4],
activeIndex: 0,
carousels:[]
}
},
components: {
swiper,
swiperSlide
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
created() {
vm = this;
},
methods: {
carousel(type) {
if (type.url !== null) {
this.$router.push(type.redirect_to);
}
}
}
}
如上图js里定义一个全局的变量vm，为了在swiper的AIP中调用vue的方法和绑定的数据, 这时候就可以解决点击事件失效的问题了！
希望对大家有所帮助！！！！
