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

  

posted @ 2024-09-05 17:10  sweeeper  阅读(112)  评论(0编辑  收藏  举报