vue2 中使用 swiper

vue2 使用 swiper 时，按照官网的方法走全是报错，经过大量的百度后终于是成功了，这里把 swiper 在 vue2 中的使用方法分享给大家

安装

npm install swiper@5.4.5 vue-awesome-swiper@4.1.1

一定要注意 swiper 和 vue-awesome-swiper 版本，如果不对应，vue就会各种报错

基本使用

<template>
  <div style="height: 90%; overflow: hidden">
    <swiper ref="mySwiper" :options="swiperOptions" style="width: 75%">
      <swiper-slide v-for="(item, index) in slideList" :key="index">
        <img
          ref="swiperImg"
          style="width: 100%; height: 100%"
          :src="item.img"
        />
        <div>{{ `1 - ${item.id}` }}</div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";

export default {
  name: "index",
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      isMounted: false,
      swiperOptions: {},
      imgSrc: "https://i.imgtg.com/2023/01/29/S6nws.jpg",
      slideList: [],
    };
  },
  created() {
    for (let i = 0; i < 20; i++) {
      this.slideList.push({ id: i + 1, img: this.imgSrc });
    }
  },
  mounted() {
    this.isMounted = true;
  },
  computed: {
    customswiper() {
      let swiper;
      if (this.isMounted) swiper = this.$refs.mySwiper.$swiper;
      return swiper;
    },
  },
};
</script>

另外要注意在引入 swiper 时

// vue-awesome-swiper@4.x 版本首字母 S 要用大写
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";

// vue-awesome-swiper@3.x 版本首字母 s 要用小写
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";

在声明 swiper 时

computed: {
    customswiper() {
      let swiper;
      // @4.1.1 版本使用 .$swiper
      // @3.1.3 版本直接 .swiper 即可
      if (this.isMounted) swiper = this.$refs.mySwiper.$swiper;
      return swiper;
    },
  },

现在官网文档都是较高版本的 api 低版本 api 与高版本会有所不同，大家看文档时要注意 api 启用版本，这里分享一下无意中发现的 swiper4 文档

http://caibaojian.com/swiper-api/

最后分享一篇当时对我帮助较大的文章

https://www.cnblogs.com/wangjianyun/p/17036906.html