vue项目中使用swiper的经验总结（vscode）

一、swiper初始化

目前最新版本是swiper7，每个版本的使用方法都略有不同，具体可看官网使用教程swiper使用办法，一般通过npm安装 npm install -S swiper
同时需要注意的是vue3和vue2的引入方法以及初始化swiper实例的区别，官网现在给出的是vue3的示例，代码如下：

<template>
  <swiper
    :slides-per-view="3"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
    :options="swiperOption"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>
</template>
<script>
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
        swiperOption: {这里写配置},
      };
    },
  };
</script>

本人这次项目使用的是vue2，所以给出vue2 初始化代码：

<template>
  <div class="home">
    <div class="swiper mySwiper">
      <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>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue';

// Import Swiper Vue.js components
import Swiper from 'swiper';
import 'swiper/swiper-bundle.min.css';

export default {
  name: 'Home',
  mounted() {
    const swiper = new Swiper('.mySwiper', {});
    console.log(swiper);
  },
};
</script>

二、选择对应功能的demo配置swiper

官网给出了一些demo示例 官网demo，你可以找到你想要的demo，但是官方没有直接给出源代码或者说配置代码，你可以点击新窗口打开，查看该网页的source，查看源代码配置：


在这里可以看DOM节点和配置，其他demo也是同样。另外还有一个插件vue-awesome-swiper，也是有很多人使用，和官网的基本上差不多，但是这个有个好处，就是能够直接看到demo的配置代码，更方便一些，vue-awesome-swiper demo网址

vue项目中的使用

首先这次项目，有两个模块都使用到了轮播图，首先第一个轮播图的功能：1.自动播放 2.能够显示左右两张图的部分 3.能够循环滑动

做的过程中遇到两个问题，一个是循环滑动设置loop=true无效，另一个是无法做到显示两边图片部分内容。

loop失效

首先loop失效的问题设计到了事件的循环机制，我一开始将swiper的初始化放在了mounted钩子函数里面，然而我的数据是动态的，也就是说我应该在获取数据之后再进行swiper的初始化，以便于dom的渲染。
于是我单独将初始化代码写成一个函数，放在method里

然后：

在获取数据之后调用初始化函数，还有另一种方法就是利用vue中的this.$nextTick()函数，将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。也是同样的原理。

显示左右部分图片

这个问题一开始以为是配置问题，通常配置是

可是开启以后还是没有效果，再通过老师指导后，发现原来是swiper的容器没有加padding

上和左右各20px的内边距，这样就能显示两边图片了。
第二个轮播图比较简单就不赘述了。