在vue项目中使用swiper自动轮播时次轮点击效果会失效
解决方案:
在vue的data中的swiper配置项swiperOption: {}中监听onclick事件,代码如下:
data() {
return {
swiperOption: {
pagination: {
el: “.swiper-pagination”,
clickable: true
},
autoplay: {
disableOnInteraction: false
},
loop: true,
slidesPerView: “auto”,
centeredSlides: true,
spaceBetween: 5,
on:{
click:(swiper)=>{
console.log(swiper.target)
//业务代码
}
}
}
}
}
在这个click事件中监听事件触发源然后执行自己业务逻辑做相应的处理。
本文解决Vue项目中使用Swiper组件时,自动轮播后点击事件失效的问题。通过配置swiperOption,设置autoplay的disableOnInteraction为false,并在click事件中监听处理业务逻辑。
1133

被折叠的 条评论
为什么被折叠?



