原因:当设置loop:true时会出现这种问题 因为 swiper通过复制dom节点来实现无限滚动,但没有复制元素上绑定的事件
解决办法:
<swiper :options="swiperOption" ref="mySwiper" @mouseenter.native="mouseEnter"
@mouseleave.native="mouseLeave">
<swiper-slide v-for="(item, index) in swiperList" :key="index">
<img :src="item.img" alt="" :data-type="item.url" />
<div class="system-name" :data-type="item.url">{{ item.name }}</div>
</swiper-slide>
</swiper>// 添加了一个data-type
swiperOption: {
loop: true,
slidesPerView: 3, // 一页放多少个图片
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
preventLinksPropagation: false,
// autoplay: false
on: {
click: function (e) {
vm.routeLink(e.target.dataset.type)
},
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
},//添加了on
如果点击的是滑动中一个内的一小部分时:swiper 点击事件无效的问题_swiper navigation 点击时间无效_windy-boy的博客-CSDN博客