vue swiper 使用vue-awesome-swiper得分组轮播遇到得问题记录

一开始使用得是单纯得swiper，导致使用tab切换显示隐藏得时候分页和数据对不上号，后来看到了基于swiper得vue版本vue-awesome-swiper，使用方式如下：

1、安装插件

npm install vue-awesome-swiper@4 --save-dev
npm install swiper@5

vue-awesome-swiper版本4和swiper对应

 2、在vue中引入

import { SwiperSlide, Swiper } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";

components: {
  Swiper,
  SwiperSlide,
},

3、在页面中引用

  
    
        填充想要得数据
    
  
  
  

     
  
  
  

    
  

export default {
    data() {
        return {
        swiperOption: {
            slidesPerView: 4,
            // spaceBetween: 0,
            slidesPerGroup: 4,
            speed: 1000,
            // loop: this.mainMatters.length>4,
            // loopFillGroupWithBlank: true,
            observer:true,
            observeParents: true,
            autoplay: {
              delay: 5000, //3秒切换一次
              pauseOnMouseEnter: true, //悬停停止切换
              disableOnInteraction: false,
            },
          },
        }
     },
     methods:{
        nextMainMatters(){
          this.$refs.mySwiperMainMatters.$swiper.slideNext()
          console.log('下一页')
        },
        prevMainMatters(){
          this.$refs.mySwiperMainMatters.$swiper.slidePrev()
        },
        mouseenterMainMatters(){
          this.$refs.mySwiperMainMatters.$swiper.autoplay.stop();
        },
        mouseleaveMainMatters(){
          this.$refs.mySwiperMainMatters.$swiper.autoplay.start(); // 重新开始自动滚动
        },
     }
}

注意点：使用鼠标移入移出事件时需要加上.native事件，否则不生效

4、切换tab按动态数据显示隐藏

代码如下：

getItem(item,index){
    this.$nextTick(()=>{
        this.$refs.mySwiperMainMatters.$swiper.autoplay.stop();
        this.$refs.mySwiperParallelMatters.$swiper.autoplay.stop(); 
        this.$refs.mySwiperMainMatters.$swiper.autoplay.start(); // 重新开始自动滚动
        this.$refs.mySwiperParallelMatters.$swiper.autoplay.start(); // 重新开始自动滚动
        this.$refs.mySwiperMainMatters.$swiper.slideTo(0, 1000, true);
        this.$refs.mySwiperParallelMatters.$swiper.slideTo(0, 1000, true);
    })
}

 注意点：

1、切换时会出现不轮播得情况，看其他网友写得是因为在切换时running无论如何切换都始终为true，但是pause却由原来的false变成了true，被暂停了，所以需要先执行stop函数再执行start函数就可以了。

2、切换时如果已经轮播开始，那么就需要加上slideTo()，不然会出现第一个tab已经轮播到第二页，这是切换第二个tab时不会从第二个tab的第一个分页开始，加上这个以后就不会出现这种情况了

 5、使用效果