vue2使用Swiper

文档

1. 安装引入

npm i swiper@5

// main.js
// 引入 swiper.css
import "swiper/css/swiper.css";

1. 使用

<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>

参考

• https://www.cnblogs.com/yc-c/p/15511788.html
• https://blog.csdn.net/m0_63907100/article/details/129413118
• https://juejin.cn/post/7054034577009967117