swiper在vue脚手架里面的使用

swiper官网

安装

npm i swiper@5
5版本的比较稳定

引入

在要使用swiper的组件里面引入
import swiper from 'swiper'
在main.js里面引入样式
import 'swiper/css/swiper.css

 <div class="swiper-container" id="mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="./images/banner1.jpg" />
            </div>
            <div class="swiper-slide">
              <img src="./images/banner2.jpg" />
            </div>
            <div class="swiper-slide">
              <img src="./images/banner3.jpg" />
            </div>
            <div class="swiper-slide">
              <img src="./images/banner4.jpg" />
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>

swiper实例的配置

  watch: {
    bannerList: {
      handler(newval, oldval) {
        this.$nextTick(() => {
          var mySwiper = new Swiper(".swiper-container", {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },

            // 如果需要滚动条
            scrollbar: {
              el: ".swiper-scrollbar",
            },
          });
        });
      },
      deep: true,
    },
  },

放在watch的原因：
由于没有DOM结构加载swiper实例就无法生效，所以要等待dom结构加载完毕之后才能加载new swiper实例，所以只能放在mounted生命周期里，但当放在mounted生命周期时，对于异步请求来说，异步请求需要时间，那么等待实例加载完毕之后，数据并没有返回，那么就无法动态生成数据以及DOM结构。
放在watch里面能监听到异步请求的数据放回之后，才加载swiper实例。但当我们使用v-for时，也会需要时间，只有v-for执行完毕之后，才能保证所有的DOM节点加载完毕。所以我们需要结合.nextTick来使用
.nextTick ：可以简单理解为 在v-for结束之后，且异步请求的数据回来之后，调用这个回调函数，能获取更新之后的DOM。
所以 swiper的实例放在watch里面，且放在 .nextTick里面最合适。

避小坑tips： 在轮播图的.swiper 这个根路径里面一定一定要设置position:relative样式，否则他的按钮会发生错位的，以及设置 overflow: hidden;

下面附上常用的轮播图：

如果想做类似以下模式的，除了基础配置之外，可以看看文档里面的 carousel(旋转木马) 参数

<template>
  <div>
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="img in carouselData" :key="img.id">
          <img :src="img.url" alt="" style="width: 100%" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!-- 如果需要滚动条 -->
      <div class="swiper-scrollbar"></div>
    </div>
  </div>
</template>

<script>
import { get } from "../utils/request";
import Swiper from "swiper";
export default {
  name: "Home",
  data() {
    return {
      // 轮播图数据放于此
      carouselData: {},
    };
  },
  methods: {
    // 获取轮播图数据的请求
    async findAll() {
      let res = await get("/index/carousel/findAll");
      this.carouselData = res.data;
      console.log(res.data);
    },
  },
  watch: {
    carouselData: {
      handler() {
        this.$nextTick(() => {
          var mySwiper = new Swiper(".swiper", {
            // direction: "vertical", // 垂直切换选项
            loop: true, // 循环模式选项
            // 一次展示几张图片
            slidesPerView: 3,
            spaceBetween: 20,
            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },

            // 如果需要滚动条
            scrollbar: {
              el: ".swiper-scrollbar",
            },
          });
        });
      },
    },
  },
  created() {
    this.findAll();
  },
};
</script>
<style lang="css" >
.swiper {
  position: relative;
  width: 80%;
  overflow: hidden;
  height: 300px;
}
img {
  width: 100%;
  height: 100%;
}
</style>