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、在页面中引用

<div class="section3-swiper-wrapper">
  <swiper :options="swiperOptionParallelMatters" ref="mySwiperParallelMatters" >
    <swiper-slide v-for="(item,index) in parallelMatters" :key="index" class="swiper-slide" @mouseenter.native="mouseenterParallelMatters" @mouseleave.native="mouseleaveParallelMatters">
        填充想要得数据
    </swiper-slid>
  </swiper>
  <!-- 下一页 -->
  <div class="swiper-next" @click="nextParallelMatters()">
     <i class="el-icon-arrow-right"></i>
  </div>
  <!-- 上一页 -->
  <div class="swiper-prev" @click="prevParallelMatters()">
    <i class="el-icon-arrow-left"></i>
  </div>
</div>

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、使用效果