关于vue中使用swiper点击图片有时无效的问题

最新推荐文章于 2023-07-28 10:54:51 发布

置顶 Hi_Eleven

最新推荐文章于 2023-07-28 10:54:51 发布

阅读量945

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/Hi_Eleven/article/details/117222575

版权

博客讲述了在Vue项目中使用VueAwesomeSwiper组件时遇到的点击图片跳转不可靠的问题。作者发现点击事件的触发并不稳定，并通过添加@click-slide事件监听解决了这一问题。调整后的代码确保了轮播图点击跳转的稳定性，同时分析了可能的错误原因，包括index值的不一致。最终，问题得到解决，但作者对于旧方法未能100%触发的原因以及index值加1的疑问仍然存在。

摘要由CSDN通过智能技术生成

项目需要，轮播图引入了vue-awesome-swiper这个组件，加入click事件，在点击图片进行跳转时候出现了问题，能不能跳转成功完全随缘，debugger都不能保证100%能进入到跳转的方法
问题代码如下：

<div class="swiper-container">
      <Swiper :options="spOptions">
        <SwiperSlide
          class="my-swp-img"
          v-for="(item, index) in imgArray"
          :key="index"
          data-id="item.id"
        >
          <img
            :src="item.img"
            style="width: 100%; height: 100%; display: block"
            @click="clkItem(item.jumpLink)"
            alt
            srcset
          />
        </SwiperSlide>
        <div class="swiper-pagination" slot="pagination"></div>
      </Swiper>
    </div>

跳转的方法

    clkItem(url) {
      if (this.$store.state.loginStatus != "ON" && url.indexOf("userm") >= 0) {
        this.$errorMsg(this.localeI18.login);
        setTimeout(() => {
          this.$router.push("login");
        }, 300);
        return;
      }
      console.log(url);
      let p = window.location.protocol;
      let a = document.createElement("a");
      a.setAttribute("href", url);
      console.log("url", url);
      if (url.indexOf("http") > -1) {
        a.setAttribute("target", "_blank");
      } else {
        a.setAttribute("target", "_self");
        console.log("跳转成功");
      }
      a.click();
      document.getElementsByTagName("body")[0].appendChild(a);
    },

很奇怪，不管是debugger还是 console.log，都不能100%触发这个方法，如果出发了就能跳转成功，反之则没有任何反应

后面经过询问朋友及查看swiper的官网API，发现我们可以用如下这个api来响应点击事件。

解决问题的代码

<div class="swiper-container">
      <Swiper :options="spOptions" @click-slide="clkItem">
        <SwiperSlide
          class="my-swp-img"
          v-for="(item, index) in imgArray"
          :key="index"
          data-id="item.id"
        >
          <img
            :src="item.img"
            style="width: 100%; height: 100%; display: block"
            alt
            srcset
          />
        </SwiperSlide>
        <div class="swiper-pagination" slot="pagination"></div>
      </Swiper>
    </div>

    clkItem(index,realIndex) {
      if (
        this.$store.state.loginStatus != "ON" &&
        this.imgArray[realIndex].jumpLink.indexOf("userm") >= 0
      ) {
        this.$errorMsg(this.localeI18.login);
        setTimeout(() => {
          this.$router.push("login");
        }, 300);
        return;
      }
      console.log(index,realIndex);
      let p = window.location.protocol;
      let a = document.createElement("a");
      a.setAttribute("href", this.imgArray[realIndex].jumpLink);
      console.log("url", this.imgArray[realIndex].jumpLink);
      if (this.imgArray[realIndex].jumpLink.indexOf("http") > -1) {
        a.setAttribute("target", "_blank");
      } else {
        a.setAttribute("target", "_self");
        console.log("跳转成功");
      }
      a.click();
      document.getElementsByTagName("body")[0].appendChild(a);
    },

用了@click-slide这个后， this.imgArray[realIndex].jumpLink这里面就不能用index了，这里打印出来的index是加1的，而真正的index是realIndex，在这样处理完后，轮播图点击跳转的问题已经OK了，但至于为何前面的方法不能百分百触发还有index为什么是加1的，这个中原因，我还是没有弄明白，希望有明白的大佬能告诉我why