vue中swiper实现tab切换，点击失效的问题

最新推荐文章于 2024-05-14 16:15:15 发布

不会下蛋的母鸡

最新推荐文章于 2024-05-14 16:15:15 发布

阅读量4.1k

点赞数 2

文章标签： vue swiper

本文链接：https://blog.csdn.net/weixin_43832890/article/details/97649975

版权

vue中swiper实现tab切换，点击失效的问题

swiper是一款非常好用的插件，其中的轮播效果估计有很多人都用过，不仅适应pc端，也适应移动端，最近写了一个swiper使用tab切换时遇到了一个问题，可能有些人也遇到过，话不多说，上代码。。

1.首先npm i swiper --save
2.在想使用swiper的组件引入swiper
2.import Swiper from ‘swiper’;
3.import ‘swiper/dist/css/swiper.min.css’（别忘记引入样式）

下面是html代码，这里没有什么大问题

<template>
  <div class="section">
    <div class="navlist">
      <ul>
        <li
          class="navli"
          v-for="(item,index) in navList"
          :class="{'activeT':nowIndex===index}"
          @click="tabClick(index)"
          :key="index"
        >
          <i>{{item.name}}</i>
        </li>
      </ul>
    </div>
    <div class="swiper-container swiper_con">
      <div class="swiper-wrapper">
        <div class="swiper-slide" ref="viewBox">1111111111</div>
        <div class="swiper-slide">22222222</div>
        <div class="swiper-slide">333333333</div>
        <div class="swiper-slide">444444444444</div>
      </div>
    </div>
  </div>
</template>

下面是一些js代码，一些初始配置

data() {
    return {
      navList: [
        { name: '首页' },
        { name: '商城' },
        { name: '购物车' },
        { name: '个人中心' }
      ],
      nowIndex: 0,
      mySwiper: ''
    }
  },

-下面是swiper的一些初始配置，详细配置和介绍可以去swiper官网了解

 mounted() {
    this.initSwiper();
  },
 initSwiper() {
      var that = this;
      that.mySwiper = new Swiper('.swiper-container', {
        initialSlide: 0,
        autoplay: false,
        keyboardControl: true,
        autoHeight: true,
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,
        autoplayDisableOnInteraction: false, //解决拖动之后不能自动轮播
        preventLinksPropagation: false,  // 阻止点击事件冒泡
        onSlideChangeStart: function (swiper) {	//这个是当swiper被改变是的回调函数，可以拿到当前索引
          console.log(swiper.activeIndex)
          // alert(swiper.activeIndex);
          that.nowIndex = swiper.activeIndex;
        }
      });
    },

当点击切换时的方法

tabClick(index) {
      this.nowIndex = index;
      this.mySwiper.slideTo(index, 300, false);
    },

样式的话就不放上来了，大家可以根据自己的喜好去弄到这里你的tab切换时可以实现的，可以去浏览器看看，但，问题来了：如果当你在修改某一处的代码并保存时，你在回到浏览器会发现tab点击切换失效了，只有当你手动去刷新页面的时候才会变好，这样肯定是不好的，影响体验：并报以下错误

vue.esm.js?efeb:1897 TypeError: this.mySwiper.slideTo is not a function
    at VueComponent.tabClick (tab.vue?8e5b:70)
    at click (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-3ec27b35","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/tab.vue (app.js:2560), <anonymous>:18:30)
    at invokeWithErrorHandling (vue.esm.js?efeb:1863)
    at HTMLLIElement.invoker (vue.esm.js?efeb:2188)
    at HTMLLIElement.original._wrapper (vue.esm.js?efeb:7559)

不要慌，经过咋的多次调试，终于把这个问题解决了，其实很简单，只要加一句代码就可以了

tabClick(index) {
      this.nowIndex = index;
      if (!this.mySwiper.slideTo) {
        this.initSwiper();
      }
      this.mySwiper.slideTo(index, 300, false);
    },

没错，在点击的时候来个if判断，在重新初始化一下，就可以解决这个问题了。
哈哈，是不是完美解决啦
第一次写博客，有写的不好的地方还请见谅