解决swiper轮播时候点击click触发不了,且获取不到当前点击的数据问题
查阅官网,可以通过监听on,以及clickedSlide解决。
html代码如下:
<div
class="swiperPlat"
style="overflow: hidden; width: 1200px; position: relative"
>
<div class="swiper-wrapper" style="width: 100%; height: 520px">
<div
class="swiper-slide"
style="background: #fff"
v-for="(item, index) in expertList"
v-if="item.homeShow == '1'"
:key="item.id"
:dataCode="item.id"
>
<div class="swiper-slide-content">
<img
:src="imgPublic + item.imageFilePath"
alt=""
class="list-img"
/>
<div class="expert-name">
<div class="name-style">{{ item.name }}</div>
<div class="title-style">
{{ item.label[0] }}
</div>
</div>
<div class="expert-remark">{{ item.desc }}</div>
</div>
</div>
</div>
</div>
js
var swiperPlat = new Swiper(".swiperPlat", {
slidesPerView: 4,
initialSlide: 0,
setWrapperSize: true,
autoplay: true,
autoplay: {
delay: 3000,
pauseOnMouseEnter: true,
disableOnInteraction: false,
},
loop: true,
direction: getDirection(),
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
on: {
resize: function () {
swiperPlat.changeDirection(getDirection());
},
click: function (swiper, event) {
if (swiperPlat.clickedSlide) {
const code = swiperPlat.clickedSlide.attributes.dataCode.value;
console.log(code);
that.pathToExpertList();
}
},
init: function () {
// 添加鼠标移入和移出事件监听器
var swiperContainer = document.querySelector(".swiperPlat");
swiperContainer.addEventListener("mouseenter", function () {
swiperPlat.autoplay.stop(); // 鼠标移入停止自动播放
});
swiperContainer.addEventListener("mouseleave", function () {
swiperPlat.autoplay.start(); // 鼠标移出恢复自动播放
});
},
},
});

浙公网安备 33010602011771号