vue-awesome-swiper @3.1.3使用，记录一些bug及解决方法

安装

注意版本很重要
vue-awesome-swiper 3.1.3对应swiper4.x
vue-awesome-swiper 4.1.4对应swiper5-6
看文档的时候看清楚！！

我用的是3.1.3
npm install vue-awesome-swiper@3.1.3

引入

<template>
  <div id="home-swiper">
    <swiper ref="homeSwiper" :options="homeSwiperOptions">
	  <swiper-slide>...</swiper-slide>
	  <swiper-slide>...</swiper-slide>
	</swiper>
  </div>	
</template>

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  components: {
    swiper,
    swiperSlide,
  },
}

一个需求：切换slide时要更换app组件的背景

首先要知道当前活跃的swiper-slide是哪个！！
就要拿到活跃的swiper-slide的索引
给swiper组件绑定slideChange事件：在当前slide切换到另一个slide时执行

<swiper
  ref="projectSwiper"
  @slideChange="slideChange"
  :options="homeSwiperOptions"
>

可以在此事件中获取swiper的realIndex，我设置了loop为true，如果是activeIndex，它是包含了loop模式复制的slide的
将realIndex用vuex保存在state中，在app组件里就能直接拿到了

问题：第一次进入时可以正常切换slide，切换路由之后，再切换回来就不能正常切换slide了

这是因为给swiper-slide内的元素进行了样式的添加修改，所以导致swiper初始化失败
解决：在配置中加上

observer: true,	// 改变swiper的样式或者修改swiper的子元素时，自动初始化swiper
observeParents: true, // 当swiper的祖先元素变化时，swiper更新
observeSlideChildren: true	// 子slide更新时，swiper更新

问题：默认显示的是最后一个swiper-slide

因为配置中设置了slidePerView:auto; ，但是我没设置loopedSlides，看了文档才发现，文档中说当设置了loop:true且slidePerView:auto; 时，loopedSlides也需要配置

我在配置上加上loopedSlides:6，发现还是默认显示了最后一个slide，然后我依次试了5、4、3、2、1，发现设置成1的时候就会默认显示第一个swiper-slide（总共有6个slide）,于是我就直接设置成了1

后续：发现这样设置之后点击分页器没问题，但是用鼠标滑动只能滑动到第二个slide，就无法继续滑了

看了一些博客之后发现loopedSlides一般设置成slide的个数，然后我就改成6了
改成6之后，默认显示成最后一个slide这个问题还是得不到解决，网上大部分这类问题都是动态加载swiper的时候会默认显示最后一个slide，解决方法给swiper组件加一个判断v-if="swiperList.length"，但是我的数据目前是在data里的静态数据，所以这个解决方法不管用
又回去看文档，发现了一个updated()函数，可以用于更新swiper，就像重新初始化一样

解决：

mounted() {
  this.swiper.update();
},

注意：这里的swiper是要获得swiper组件实例的

computed: {
  swiper() {
    return this.$refs.mySwiper.swiper;
  }
}

---

目前先这样，后续有什么问题再更新，虽然目前暂时没bug了，但是还是有点懵懵的😢

---

1.10更新

问题：点击pagination时若不小心拖动也会引起slide切换

具体表现为，点击paginatiion试图切换时，若点击过快，有时候就会形成一种拖动的效果，同样也会触发slide切换，这样的用户体验其实是极差的。

解决方法：
为pagination新增类名stop-swiping（并无限制，自定义即可）
在配置中加上：

noSwiping: true,
noSwipingClass: "stop-swiping",