參考連接：vue-sawesome-swiper官方npm庫(kù)介紹
step1.安裝插件
cnpm install vue-awesome-swiper --save
step2.在當(dāng)前頁(yè)面引用插件
// 引入swiper的css樣式
require('swiper/dist/css/swiper.css');
import Vue from "vue";
import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper);
import { swiper, swiperSlide } from 'vue-awesome-swiper';
step3.組件聲明
components: {
swiper,
swiperSlide,
},
step4.data數(shù)據(jù)聲明
!!! notNextTick是一個(gè)組件自有屬性撞反，如果notNextTick設(shè)置為true，組件則不會(huì)通過NextTick來實(shí)例化swiper，也就意味著你可以在第一時(shí)間獲取到swiper對(duì)象豪硅，假如你需要?jiǎng)偧虞d遍使用獲取swiper對(duì)象來做什么事，那么這個(gè)屬性一定要是true
data(){
return {
notNextTick: true,
swiperOption: {
// swiper optionss 所有的配置同swiper官方api配置
// autoplay: 3000,
direction: 'horizontal',
grabCursor: true,
setWrapperSize: true,
autoHeight: true,
pagination: '.swiper-pagination',
paginationClickable: true,
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
// scrollbar: '.swiper-scrollbar',
mousewheelControl: true,
observeParents: true,
// if you need use plugins in the swiper, you can config in here like this
// 如果自行設(shè)計(jì)了插件喜鼓，那么插件的一些配置相關(guān)參數(shù)康铭，也應(yīng)該出現(xiàn)在這個(gè)對(duì)象中，如下debugger
debugger: true,
// swiper callbacks
// swiper的各種回調(diào)函數(shù)也可以出現(xiàn)在這個(gè)對(duì)象中顾孽，和swiper官方一樣
onTransitionStart(swiper){
console.log(swiper)
},
}
}}
step5.html標(biāo)簽結(jié)構(gòu)
<swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper">
<!-- slides -->
<swiper-slide v-for="(pic,index) in photoArg"></swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
step6.調(diào)用swiper封裝好的方法
添加swiper計(jì)算屬性方法
// 如果你需要得到當(dāng)前的swiper對(duì)象來做一些事情，你可以像下面這樣定義一個(gè)方法屬性來獲取當(dāng)前的swiper對(duì)象比规，同時(shí)notNextTick必須為true
computed: {
swiper:function() {
return this.$refs.mySwiper.swiper
},
},
在項(xiàng)目方法中調(diào)用swiper插件的封裝方法（slideTo()）
// 然后你就可以使用當(dāng)前上下文內(nèi)的swiper對(duì)象去做你想做的事了
methods:{
checkPic:function (index,picID) {
var self = this;
self.popupImgFlag = true;
self.photoArg = self.items[index].picUrl;
this.swiper.slideTo(picID, 1000, false); //slideTo()
document.body.style.overflowY = "hidden";
document.getElementById("app").style.overflowY = "hidden";
},
}
step7.修改分頁(yè)器樣式
在當(dāng)前組件下若厚，另外再創(chuàng)建要給style標(biāo)簽，且不用scoped限制作用域蜒什，再把要修改的分頁(yè)器樣式寫在此style標(biāo)簽內(nèi)测秸。（過程中，直接在當(dāng)前的style樣式（有scoped限制）修改樣式無效灾常，遂通過搜索找到此方法）
<style scoped>
....（在這里修改分頁(yè)器樣式無效）
<style>
//額外添加下述多一個(gè)style標(biāo)簽樣式
<style>
#skinDetail .swiper-pagination-bullet{ //記得在其前面添加父級(jí)樣式名（如#skinDetail）霎冯，以避免影響全局樣式
background-color: #fff;
}
#skinDetail .swiper-pagination-bullet-active{
background-color: #007aff;
}
</style>
項(xiàng)目過程遇到的坑：
在項(xiàng)目中，我的html結(jié)構(gòu)內(nèi)容是包含在一個(gè)塊內(nèi)钞瀑，并通過v-if控制輪播的出現(xiàn)和消失沈撞，然而在點(diǎn)擊出現(xiàn)內(nèi)容時(shí)，頁(yè)面輪播插件顯示正常雕什，而swiper方法卻不可執(zhí)行关串，console后臺(tái)報(bào)錯(cuò)undefined，最后排查發(fā)現(xiàn)是計(jì)算屬性computed在執(zhí)行時(shí)监徘，獲取不到swiper對(duì)象晋修，而后將v-if改為v-show即解決。（報(bào)錯(cuò)的原因：開始v-if為false凰盔，此時(shí)彈窗并未編譯渲染到當(dāng)前頁(yè)面結(jié)構(gòu)墓卦，因此computed執(zhí)行時(shí)，并未找到swiper內(nèi)容户敬，所以執(zhí)行方法this.swiper.slideTo()報(bào)錯(cuò),這也從正面證明了v-if的初始化較快落剪，但切換代價(jià)高睁本；）
<!--點(diǎn)擊圖片彈窗-->
<div class="popupImg" v-if="popupImgFlag" @click="closePoupPic">
<swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper">
<!-- slides -->
<swiper-slide v-for="(pic,index) in photoArg"></swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</div>
