跳转至

暂停轮播

this.swiper.autoplay.stop()
<template>
  <div class="swiper_tab">
    <div class="swiper-container tab1">
      <div v-if="!isLoading" class="swiper-wrapper">
        <div v-for="item in teamData.tOverseasTeamList" :key="item.tOverseasTeamID" class="swiper-slide" @click="handleRowClick(item)">
          <div class="swiper_content">
            <!-- 相关内容 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from 'swiper'
export default {
  name: 'RightListTeamTab',
  data() {
    return {
      swiper: null
    }
  },
  mounted(){
    // 实际项目中有点问题,用 setTimeout 延时 10ms 临时解决了
    this.initSwiper(".tab1", 5)
  },
  methods: {
    initSwiper(className, listLength) {
      // 如果已经存在一个 Swiper 实例,先销毁它
      if (this.swiper) {
        this.swiper.destroy()
        this.swiper = null
      }

      const params = {
        loop: listLength >= 13,
        direction: 'vertical',
        slidesPerView: 13,
        spaceBetween: 0,
        autoplay: {
          delay: 1500,
          // 触摸停止
          disableOnInteraction: true
        },
        mousewheel: true,
        keyboard: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        pagination: {
          el: '.swiper-pagination'
        }
      }

      this.swiper = new Swiper(className, params)

      return this.swiper
    }
  }
}
</script>