Vue 中使用vue-awesome-swiper

官方在线demo：https://github.surmon.me/vue-awesome-swiper/

属性中文解释：https://segmentfault.com/a/1190000014609379

下载

cnpm i -S vue-awesome-swiper@3

vue-awesome-swiper@3它会自动安装好匹配版本的swiper，即4.5.1

注意：下面截图中的swiper显示的是4.0.7,但其实真正安装好的是4.5.1

vue-awesome-swiper根据不同的swiper版本也对应有不同的版本，主要有三个版本：

• Vue-Awesome-Swiper - v2.6.7 对应 Swiper3
• Vue-Awesome-Swiper - v3.1.3 对应 Swiper4
• Vue-Awesome-Swiper - v4.1.1 对应 Swiper6（截止2020/08/10）

建议一开始就安装vue-awesome-swiper 3.1.3版，安装对应的swiper版本，然后全部按照3.1.3版本的文档来使用。

全局引入：

import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
Vue.use(VueAwesomeSwiper);

局部引入：

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

export default {
  components: {
    swiper,
    swiperSlide
  }
}

基本使用1：

<template>
  <div class="theSwiper">
    <swiper :options="swiperOption">
      <swiper-slide>I'm Slide 1</swiper-slide>
      <swiper-slide>I'm Slide 2</swiper-slide>
      <swiper-slide>I'm Slide 3</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>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  filters: {},
  methods: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
  .theSwiper {
    width: 500px;
    .swiper-container {
      position: relative;
      height: 200px;
      background: rgba(0, 0, 0, 0.137);
      border: 1px solid white;
      .swiper-slide {
        line-height: 200px;
        color: rgb(255, 255, 255);
        background-color: rgba(30, 103, 212, 0.116);
        font-size: 16px;
        text-align: center;
      }
    }
  }
</style>

基本使用2：

<template>
  <div class="theSwiper">
        <swiper :options="swiperOption">
          <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>
          <swiper-slide>I'm Slide 5</swiper-slide>
          <swiper-slide>I'm Slide 6</swiper-slide>
          <swiper-slide>I'm Slide 7</swiper-slide>
          <swiper-slide>I'm Slide 8</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>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      swiperOption: {
        loop: true, //首尾循环
        //不想自动滚动，只需注释掉autoplay属性即可
        autoplay: {
          delay: 600,
          stopOnLastSlide: false, //true表示滚动到最后一页后停止滚动
          disableOnInteraction: false, //true：交互后，不继续滚动
        },
        // centeredSlides: true, //true:当前板块居中
        slidesPerView: 2, //页面中的板块数量

        freeMode: false, //true:拖到哪就是哪
        spaceBetween: 30, //板块间隔
        grabCursor: false, //true：鼠标为抓手
        // slidesPerGroup: 3, //多少个板块为1组。
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //true：点击底部小圆点可以跳转页面
          type: "fraction", //当前页显示 1/7
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  filters: {},
  methods: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
  .theSwiper {
    width: 500px;
    .swiper-container {
      position: relative;
      height: 200px;
      background: rgba(0, 0, 0, 0.137);
      border: 1px solid white;
      .swiper-slide {
        line-height: 200px;
        color: rgb(255, 255, 255);
        background-color: rgba(30, 103, 212, 0.116);
        font-size: 16px;
        text-align: center;
      }
    }
  }
</style>

 基本使用3：

<template>
  <div class="theSwiper">
        <swiper :options="swiperOption">
          <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>
          <swiper-slide>I'm Slide 5</swiper-slide>
          <swiper-slide>I'm Slide 6</swiper-slide>
          <swiper-slide>I'm Slide 7</swiper-slide>
          <swiper-slide>I'm Slide 8</swiper-slide>
          <swiper-slide>I'm Slide 9</swiper-slide>
          <swiper-slide>I'm Slide 10</swiper-slide>
          <swiper-slide>I'm Slide 11</swiper-slide>
        </swiper>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      swiperOption: {
        loop: false, //首尾循环
        direction: "vertical",
        autoplay: {
          delay: 600,
          stopOnLastSlide: false, //true表示滚动到最后一页后停止滚动
          disableOnInteraction: false, //false:交互后，还是可以继续滚动。
          //当disableOnInteraction设为false，交互后却不滚动，则考虑loop为true时，是否slidesPerView属性值小于了板块数量。如果小于，则不会滚动。
          //因此建议loop设为false,disableOnInteraction设为false。此时就不用考虑slidesPerView的值是否小于板块值了。
        },

        slidesPerView: 6,
        spaceBetween: 3, //板块间隔
        slidesPerGroup: 1, //多少个板块为1组。
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  filters: {},
  methods: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
  .theSwiper {
    width: 500px;
    .swiper-container {
      position: relative;
      height: 200px;
      background: rgba(0, 0, 0, 0.137);
      border: 1px solid white;
      .swiper-slide {
        line-height: 200px;
        color: rgb(255, 255, 255);
        background-color: rgba(30, 103, 212, 0.116);
        font-size: 16px;
        text-align: center;
      }
    }
  }
</style>