vue中使用swiper

在使用swiper的過程中會遇到很多問題，每次使用時都需要踩坑，這里記錄一下本次使用的方法，以避免后邊使用中耗費時間。

1、下載

在vue中使用swiper需要下載vue-swiper-awesome ，最好下載版本3，是最穩定的版本。
cnpm install vue-awesome-swiper@3 --save-dev

2、使用

由於項目中使用swiper的頁面非常少，因此不需要全局引入，只需要在組件中局部引入即可。

//模板
<div class="recommendPage">
          <swiper :options="swiperOption" ref="mySwiper" class="swiper-wrapper">
            <swiper-slide>I'm Slide 1</swiper-slide>
            <swiper-slide>I'm Slide 2</swiper-slide>
            <swiper-slide>I'm Slide 3</swiper-slide>
            <swiper-slide>I'm Slide 4</swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
          </swiper>
        </div>

//引入
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

//注冊
export default {
  components: { swiper, swiperSlide },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  data() {
    return {
      swiperOption: {
        loop: false,  // 是否循環輪播
        autoplay: false,  // 是否可以自動輪播
        slidesPerView: 5,  // 可是區域內可展示多少個塊
        spaceBetween: 30,  // 塊之間間隔距離
        initialSlide:0,  // 默認初始顯示塊
        freeMode: false,
        // 顯示分頁
        pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
        // 設置點擊箭頭
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
	}
  }
}

//樣式
.recommendPage .swiper-container {
  position: relative;
  width: 100%;
  height: 200px;
}
.recommendPage .swiper-container .swiper-slide {
  width: 100%;
  line-height: 200px;
  border:1px solid green;
  color: #000;
  font-size: 16px;
  text-align: center;
}