vue-awesome-swiper 使用及遇坑记录

vue-awesome-swiper的使用网上教程看似简单，但是由于组件并不是类似element UI等人人皆知，因此难免遇上问题且百度与自己实际问题存在出入的情况。总体实现是较为简单的，但是我在使用过程中主要的问题在于组件版本的问题，由于vue-awesome-swiper的版本与vue版本适配存在问题，导致组件虽能正常显示但是具体autoplay等功能均无法正常使用。

针对组件的具体实现属性等可查询：

        1. 实现样式展示及源码

        2. 组件官方配置详解

简述一下本次使用：

        根据自身Vue版本下载相应合适版本，作为参考本次使用的Vue版本为 2.6.10

        需注意在下载完后务必要去node_modules中确认swiper的版本，不同版本的swiper配置等存在差异，本次使用的swiper为"^5.4.5"

 npm install vue-awesome-swiper@3 --save-dev

        下载完成后在 main.js 内引入相关资源：

import vueSwiper from 'vue-awesome-swiper' // 引入轮播图组件
Vue.use(vueSwiper) // Vue实现组件的安装和注册

        在需要使用的页面中引入相应组件与其相关样式：

import {swiper, swiperSlide} from "vue-awesome-swiper";
//引入样式（也可在main.js中全局引入，根据项目需求可自行灵活设置）
import 'swiper/css/swiper.css'  

        注册组件并使用：

  components: { // 注册相应组件
    swiper, 
    swiperSlide
  },

  data() {
    const that = this
    return{
      // 项目图片地址
      commodity: [
        // 下面针对使用项目内已包含的静态图片地址提供了两种调用方式，建议使用第二种
        "http://localhost:9528/static/img/part2-aboutUs-pic.55febb5c.png",
        require("../../assets/aboutUs-content-pic1.png")
      ],
      swiperOption: {
        //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: true,
        //循环
        loop: true,
        //设定初始化时slide的索引
        initialSlide: 0,
        //自动播放
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        //滑动速度
        speed: 800,
        //滑动方向
        direction: "horizontal",
        //小手掌抓取滑动
        grabCursor: true,
        //滑动之后回调函数
        on: {
          slideChangeTransitionStart: function () {
            //获取轮播图片下标索引；这里有一个坑，之前网上找到的是用activeIndex，但后来网上说的是这个realIndex，原来activeIndex是swiper2.0的；而realIndex是swiper3.0的，（使用realIndex才实现了下标索引）
            that.imgIndex = this.realIndex + 1; 
          },
        },
    // 对于使用的小组件一定要进行注册，否则无法使用
        // 左右页面跳转按钮 
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
         },
        // 分页器设置
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets",
        },
      },
    }
  }

html部分写的比较粗糙，仅举个例子：

<div style="position: relative">
          <swiper
            class="swiImgs"
            :options="swiperOption"
            v-if="commodity.length != 0"
          >
            <swiperSlide
              v-for="(item, index) in commodity"
              data-index="index"
              :key="index"
              class="item"
            >
              <!-- 点击事件按需编写，再此就不再过多赘述 -->
              <img class="swiImg" :src= item @click="imgClick" />
            </swiperSlide>
            <!-- 下一页 -->
            <div class="swiper-button-next" slot="button-prev"></div>
            <!-- 上一页 -->
            <div class="swiper-button-prev" slot="button-next"></div>
            <!-- 分页器 -->
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>