由于歷史原因，vue-awesome-swiper和swiper組件是存在著多版本不同處理的坑的柳骄，不要不信团赏，如果您和我一樣，遇到一個(gè)vue-awesome-swiper的問題耐薯，上網(wǎng)找可能會(huì)有N種寫法舔清，N種方案，結(jié)果對(duì)于自己試了N個(gè)方案發(fā)現(xiàn)都不行不兼容曲初。(這幾天一度抓狂体谒，最后用起來還是逃不過真香)
今天要解決的問題：
-
1.如果install后，出現(xiàn)各種問題臼婆，看下面：
先把項(xiàng)目中直接npm install swiper vue-awesome-swiper -s的依賴都刪了抒痒，怎么刪自行百度，然后颁褂，別控制故响，復(fù)制粘貼纷捞，我的操作都是基于這兩個(gè)版本做的，不是這兩個(gè)版本的患者就不要往下看了被去。
npm install swiper@5 vue-awesome-swiper@4 --save
全局注冊(cè)
/**
main.js文件中
*/
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)
本地注冊(cè)
/**
***.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實(shí)例
這兩個(gè)版本不同以往的主儡，獲取方式是不同的，很大清年代的帖子反映：
要么this.$refs.mySwiper.swiper能拿到
要么說設(shè)置全局組件就能拿到
結(jié)果都是undefine惨缆，最后在一個(gè)隱秘的角落看到如下：
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：這個(gè)就別用了
realIndex：滾動(dòng)到當(dāng)前的真實(shí)index寂汇，不包含重復(fù)復(fù)制的
注:網(wǎng)上很多人的帖都用這個(gè)，如果要做一些定制的banner捣染，例如不是一個(gè)banner圖占100%屏幕寬的骄瓣，這個(gè)就別用了，可以試試
clickedIndex：獲取當(dāng)前點(diǎn)擊的index
-
5.修改某些swiperOption的屬性后耍攘，需要變更如何處理
我自己的需求比較變態(tài)榕栏，我們的輪播圖每張都有自己的展示時(shí)間，導(dǎo)致我懵逼5分鐘后才接受這個(gè)現(xiàn)實(shí)蕾各，其他動(dòng)態(tài)改數(shù)據(jù)其實(shí)也是一樣的扒磁。如下
watch:{
lastIndex(newName) {
this.$refs.mySwiper.$swiper.params.autoplay.delay = this.timer[newName]
}
},
基本上swiperOption設(shè)置的值都可以這么改，都在this.swiper.params里
-
6.當(dāng)手動(dòng)劃動(dòng)swiper后式曲，輪播圖不會(huì)自動(dòng)輪播了
autoplay:{
delay:1000,
disableOnInteraction: false,
},
加上disableOnInteraction: false即可妨托。
后續(xù)還有什么坑歡迎騷擾，只玩swiper@5吝羞、vue-awesome-swiper@4這兩個(gè)版本兰伤，swiper@6的話還是暫時(shí)別碰，貌似國(guó)內(nèi)還沒中文文檔之類的鬼話钧排，好的敦腔，打完收工。
