Vue 中使用vue-awesome-swiper

﹏ヽ暗。殇╰゛Y 2022-09-04 04:46 546阅读 0赞

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

属性中文解释：[https://segmentfault.com/a/1190000014609379][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**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 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： #

![20210812144705771.gif][]

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

![20210812145018616.gif][]

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

[https_github.surmon.me_vue-awesome-swiper]: https://github.surmon.me/vue-awesome-swiper/
[https_segmentfault.com_a_1190000014609379]: https://segmentfault.com/a/1190000014609379
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20220829/a6b9023a4ec54174bcb3dc226f72a3da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20220829/2268d29d576f498aaede56a161e8e310.png
[20210812144705771.gif]: /images/20220829/3a4e6e5267f04f028e4b02b436aee08e.png
[20210812145018616.gif]: /images/20220829/92b6bdb6fabc49ab999f02bf564217b4.png