前言

简单记录一下自己在项目中引入Swiper遇到的坑，也算是长个见识

话不多说，接下来准备面对疾风

最近有个轮播图的需求，个人比较懒，就直接引用Swiper，之前没有用过这个库，所以有些坑没办法避免

第一波疾风

查阅了官方文档
www.swiper.com.cn
通过npm进行安装

npm i swiper

！！！这直接导致我安装了最新版本Swiper6

main.js配置

import ‘swiper/swiper-bundle.css’

我是跟着文档一步步配置的所有准备工作完成之后就开始写demo了
HTML部分

<template>
  <div class="homecontainer _homecontainer">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>I'm Slide 1</swiper-slide>
      <swiper-slide>I'm Slide 2 </swiper-slide>
      <swiper-slide>I'm Slide 3</swiper-slide>
      <swiper-slide>I'm Slide 4</swiper-slide>       
    </swiper>
  </div>
</template>
复制代码

JS部分

export default {
  data() {
    return {
      swiperOptions: {
        slidesPerView: 4, // 显示个数
        direction: 'vertical',
        pagination: {
          el: '.swiper-pagination'
        }
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted() {
  },
  methods: {
    onSwiper(swiper) {
      console.log(swiper)
    },
    onSlideChange() {
      console.log('slide change')
    }
  }
}
复制代码

好家伙，我直呼好家伙，写完之后轮播图不能动。只能怪我太天真的，
控制台报错

TypeError: Cannot read property ‘slideTo‘ of undefined“

打开控制台查看$refs里面的东西发现找不到swiper 这期间也百度了一些方法，不知道为什么别人的是加了$swiper之后不可以，删掉$之后运行正常。而我这个只有加$才可以显示
return this.$refs.mySwiper.swiper
修改为
return this.$refs.mySwiper.$swiper
修改之后就能正常显示。当修复完这个问题的时候，我天真的以为可以用了。结果第二波疾风来了

第二波疾风

第二波疾风就是我这个轮播图不能动！！！不能动我要你何用，心态直接炸裂，借用别人的demo进行观摩学习一下
html代码

<template>
  <div class="homecontainer _homecontainer">
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <swiper-slide>I'm Slide 1</swiper-slide>
      <swiper-slide>I'm Slide 2</swiper-slide>
      <swiper-slide>I'm Slide 3</swiper-slide>
      <swiper-slide>I'm Slide 4</swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination" />
      <!-- <div class="swiper-pagination" slot="“pagination”/"> -->
      <!-- <div class="swiper-button-prev" slot="button-prev" />
      <div class="swiper-button-next" slot="button-next" /> -->
      <!-- <div class="swiper-scrollbar" slot="scrollbar" /> -->
    </swiper>
  </div>
</template>
复制代码

JS代码

export default {
  data() {
    return {
      swiperOption: {
        notNextTick: true,
        // swiper configs 所有的配置同swiper官方api配置
        //* 初始化自动播放
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        //* 自动播放
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        direction: 'vertical',
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true },
        paginationClickable: true,
        //* 左右按钮
        // prevButton: '.swiper-button-prev',
        // nextButton: '.swiper-button-next',
        // scrollbar: '.swiper-scrollbar',//*滚动条
        mousewheelControl: true,
        // if you need use plugins in the swiper, you can config in here like this
        // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
        debugger: true,
        // swiper callbacks
        // swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
        onTransitionStart(swiper) {
          console.log(swiper)
        }
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  },
  mounted() {
    // console.log('this is current swiper instance object', this.swiper)
    this.swiper.slideTo(3, 1000, false)
  },
  methods: {
    onSwiper(swiper) {
      console.log(swiper)
    },
    onSlideChange() {
      console.log('slide change')
    }
  }
}
复制代码