使用swiper4平滑纵向无间隙滚动，鼠标点击或拖动后，动画未全部完成，鼠标移出 自动轮播失效，以及动态渲染数据，动画紊乱

使用swiper4平滑纵向无间隙滚动，鼠标点击或拖动后，动画未全部完成，鼠标移出 自动轮播失效

每次遇见一些刁钻的问题，然后百度解决的时候，遇见的都是粘贴复制的、类似的， 完了还解决不了，真的感觉特别心累。。。。

先概括一下网上搜到的吧

1. disableOnInteraction: 用户操作之后是否禁止autoplay(默认值： true： 禁止);

speed: 2000,
autoplay: {
    
    
  delay: 2500,
  disableOnInteraction: false,
}

这里要注意一点： autoplay.delay 的值一定要大于 speed， 不然也没有用

2. autoPalyDisableOnInteraction: 这个逻辑和上面第一个是一致的，只是这个是 v3 版本，disableOnInteraction是v4及之后的版本，

autoPalyDisableOnInteraction: false,
autoplay: {
    
    
  ...
}

3. 自己定义 onmouse 事件

mySwiper.el.onmouseover = function(){
    
    
  mySwiper.autoplay.stop();
}
mySwiper.el.onmouseout = function(){
    
    
  mySwiper.autoplay.start();
}

4. pauseOnMouseEnter：最方便的，也不会产生什么问题，但是启用版本：6.6.2…

 autoplay: {
    
    
   pauseOnMouseEnter: true,
 }

那么问题来了，v4版本，并且 delay：0，上面一个都用不了。。。

那就自己搞一个

最后还是只能结合api来自己做一个暂停，烦人
主要就是结合 transitionEnd & slideNext ;
当当前过渡完成之后，立马切换到下一张；
话不多说，直接贴最终代码：

<template>
  <div class='swiper-page'>
    <div class="swiper" id="swiper" ref="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in 20" :key="item" :style="{backgroundColor: colorList[item % colorList.length]}"> slide-item {
    
    {
    
     item }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper';

export default {
    
    
  data() {
    
    
    return {
    
    
      swiperIns: null,
      swiperPause: false, // 轮播暂停
      colorList: ['#FC88A6', '#F7A753', '#3F8EFA', '#33D260', '#6AC1E1'],
    };
  },
  mounted() {
    
    
    this.$nextTick(_ => {
    
    

      // 每次实例化之前，销毁之前的实例，防止动画紊乱
      if (this.swiperIns) {
    
    
        this.swiperIns.destroy();
      }

      this.swiperIns = new Swiper("#swiper", {
    
    
        speed: 2000,
        direction: 'vertical',
        height: 80,// 这里不使用 slidesPerView 自动计算，不然可能初始化的时候会出现问题
        loop: true,
        loopAdditionalSlides: 5,
        preventLinksPropagation: true,
        on: {
    
    
          transitionEnd: () => {
    
     // 过渡完成就尝试跳转下一张
            this.swiperAutoPlay();
          }
        }
      });
      this.swiperAutoPlay(); // 需要手动开始第一次跳转

      this.$refs.swiper.onmouseenter = () => {
    
    
        this.swiperPause = true;
      };
      this.$refs.swiper.onmouseleave = () => {
    
    
        // 重新开始轮播需要设置下面两项数据
        this.swiperPause = false;
        this.swiperAutoPlay();
      }

    });
  },

  methods: {
    
    
    // 尝试播放下一张
    swiperAutoPlay() {
    
    
      this.$nextTick(_ => {
    
    
        if (this.swiperPause === false) {
    
    
          this.swiperIns.slideNext();
        }
      })
    },
  }

};
</script>

<style lang='scss' scoped>
.swiper-page {
    
    
  #swiper {
    
    
    margin: 200px auto 0px;
    width: 500px;
    height: 400px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    overflow: hidden;

    .swiper-wrapper {
    
    
      transition-timing-function: linear;
    }

    .swiper-slide {
    
    
      width: 100%;
      height: 80px;
      line-height: 80px;
      font-size: 30px;
      text-align: center;
      color: #ccc;
      box-sizing: border-box;
      border: 1px solid #ccc;
    }
  }
}
</style>