由于历史原因，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的话还是暂时别碰，貌似国内还没中文文档之类的鬼话，好的，打完收工。
