解决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(); // 鼠标移出恢复自动播放 }); }, }, });