前端vue2.5：typescript中使用swiper輪播

下載npm 包；

npm install swiper @types/swiper --save--dev
複製代碼

在home.ts中引入配置；import Swiper from "swiper"

import { Component, Vue } from "vue-property-decorator"
import { Getter, Action } from "vuex-class"
// @ts-ignore
import Swiper from 'swiper'
import { HomeData } from './home.interface'
// import {  } from "@/components" // 組件

@Component({})
export default class Home extends Vue {

  // data
  data: HomeData = {
    pageName: 'home'
  }

  /**
   * @description: 初始化swiper 配置；
   * @return: none
   * */
   public initSwiper():void{
    const swiper = new Swiper('.swiper-container', {
      direction: 'vertical',
      slidesPerView: 3,
      spaceBetween: 0,
      loop: true,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
    });
  }


  created() {
    //

  }

  mounted() {
    //
    this.init();
  }

  /**
   * @description: 初始化函數
   * */
  public init():void{
    //
    this.initSwiper()
  }

}
複製代碼

在home.vue中使用swiper;

<!-- Swiper 滾動新聞 -->
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
                <div class="swiper-slide">Slide 10</div>
              </div>
            </div>
複製代碼