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;
   100%;
  height: 200px;
}
.recommendPage .swiper-container .swiper-slide {
   100%;
  line-height: 200px;
  border:1px solid green;
  color: #000;
  font-size: 16px;
  text-align: center;
}