Vue2 使用swiper

前言

最近用vue2使用swiper插件遇到了一堆坑，也是因为本人技术的原因。网上搜了很多解决方案，但都没有解决问题，而且官方给出的文档版本太混乱了，版本高的都使用ts了

开发环境

• vue：^2.6.11
• swiper：^5.4.5
• vue-awesome-swiper：^3.1.3

刚开始没有指定vue-awesome-swiper和swiper的版本，使用的时候报了很多错。

npm i swiper@5.4.5 vue-awesome-swiper@3.1.3 --save-dev

代码示例

导入组件和css文件

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

使用组件

<swiper :options="swiperOptions">
          <swiper-slide
            v-for="(item,index) in slideList"
            :key="index"
          >
            <a href="">
              <img
                :src="item.img"
                alt=""
              >
            </a>
          </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>

<script>
import ServiceBar from "../components/ServiceBar";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";

export default {
  name: "index",
  data() {
    return {
      date: new Date(),
      swiperOptions: {
        autoplay: {
          delay: 500,
          disableOnInteraction: true,
        },
        loop: true,
        effect: "cube",
        cube: {
          slideShadows: true,
          shadow: true,
          shadowOffset: 100,
          shadowScale: 0.6,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
          type: "bullets",
          clickable: true,
          // progressbarOpposite: true,
        },
      },
      slideList: [
        {
          id: "42",
          img: "/imgs/slider/slide-1.jpg",
        },
        {
          id: "45",
          img: "/imgs/slider/slide-2.jpg",
        },
        {
          id: "45",
          img: "/imgs/slider/slide-3.jpg",
        },
        {
          id: "45",
          img: "/imgs/slider/slide-4.jpg",
        },
        {
          id: "45",
          img: "/imgs/slider/slide-5.jpg",
        },
      ],
    };
  },
  components: {
    swiper,
    swiperSlide,
  },
};
</script>

注意：
在使用分页器、前后退按钮等API时，需要使用插槽slot把参数传递过去

swiper@4-7官方API文档：https://swiper.com.cn/api/index.html