vue-awesome-swiper快速避坑之路

由于历史原因，vue-awesome-swiper和swiper组件是存在着多版本不同处理的坑的，不要不信，如果您和我一样，遇到一个vue-awesome-swiper的问题，上网找可能会有N种写法，N种方案，结果对于自己试了N个方案发现都不行不兼容。(这几天一度抓狂，最后用起来还是逃不过真香)

今天要解决的问题：

• 1.如果install后，出现各种问题，看下面：

先把项目中直接npm install swiper vue-awesome-swiper -s的依赖都删了，怎么删自行百度，然后，别控制，复制粘贴，我的操作都是基于这两个版本做的，不是这两个版本的患者就不要往下看了。

npm install swiper@5 vue-awesome-swiper@4 --save

全局注册

/**
main.js文件中    
*/
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper)

本地注册

/**
***.vue文件中    
*/
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
components: {
  Swiper,
  SwiperSlide
  }
}

然后去这里找样式 想怎么玩怎么玩 想怎么改怎么改

https://github.surmon.me/vue-awesome-swiper/

• 2.如何获取swiper实例

这两个版本不同以往的，获取方式是不同的，很大清年代的帖子反映：

要么this.$refs.mySwiper.swiper能拿到

要么说设置全局组件就能拿到

结果都是undefine，最后在一个隐秘的角落看到如下：

this.$refs.mySwiper.$swiper //swiper@5版本是这样拿的

• 3.传值问题

先处理this的指向，然后在赋值：

    data() {
      let _this = this
      return {
        lastIndex: 0,
        timer:[1000, 2000, 3000],
        swiperOption: {
          loop:true,
          autoplay:{
            delay:1000,
            disableOnInteraction: false,
          },
          on: {
            slideChange: function(){
              _this.lastIndex = this.realIndex;
            },
          },
        }
      }
    },

• 4.realIndex、activeIndex、clickedIndex

activeIndex：这个就别用了

realIndex：滚动到当前的真实index，不包含重复复制的
注:网上很多人的帖都用这个，如果要做一些定制的banner，例如不是一个banner图占100%屏幕宽的，这个就别用了，可以试试

clickedIndex：获取当前点击的index

• 5.修改某些swiperOption的属性后，需要变更如何处理

我自己的需求比较变态，我们的轮播图每张都有自己的展示时间，导致我懵逼5分钟后才接受这个现实，其他动态改数据其实也是一样的。如下

    watch:{
      lastIndex(newName) {
        this.$refs.mySwiper.$swiper.params.autoplay.delay = this.timer[newName]
      }
    },

基本上swiperOption设置的值都可以这么改，都在this.swiper.params里

• 6.当手动划动swiper后，轮播图不会自动轮播了

autoplay:{
            delay:1000,
            disableOnInteraction: false,
          },

加上disableOnInteraction: false即可。

后续还有什么坑欢迎骚扰，只玩swiper@5、vue-awesome-swiper@4这两个版本，swiper@6的话还是暂时别碰，貌似国内还没中文文档之类的鬼话，好的，打完收工。