参考连接：vue-sawesome-swiper官方npm库介绍
step1.安装插件
cnpm install vue-awesome-swiper --save
step2.在当前页面引用插件
// 引入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数据声明
!!! notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是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
// 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
debugger: true,
// swiper callbacks
// swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
onTransitionStart(swiper){
console.log(swiper)
},
}
}}
step5.html标签结构
<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.调用swiper封装好的方法
添加swiper计算属性方法
// 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
computed: {
swiper:function() {
return this.$refs.mySwiper.swiper
},
},
在项目方法中调用swiper插件的封装方法（slideTo()）
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
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.修改分页器样式
在当前组件下，另外再创建要给style标签，且不用scoped限制作用域，再把要修改的分页器样式写在此style标签内。（过程中，直接在当前的style样式（有scoped限制）修改样式无效，遂通过搜索找到此方法）
<style scoped>
....（在这里修改分页器样式无效）
<style>
//额外添加下述多一个style标签样式
<style>
#skinDetail .swiper-pagination-bullet{ //记得在其前面添加父级样式名（如#skinDetail），以避免影响全局样式
background-color: #fff;
}
#skinDetail .swiper-pagination-bullet-active{
background-color: #007aff;
}
</style>
项目过程遇到的坑：
在项目中，我的html结构内容是包含在一个块内，并通过v-if控制轮播的出现和消失，然而在点击出现内容时，页面轮播插件显示正常，而swiper方法却不可执行，console后台报错undefined，最后排查发现是计算属性computed在执行时，获取不到swiper对象，而后将v-if改为v-show即解决。（报错的原因：开始v-if为false，此时弹窗并未编译渲染到当前页面结构，因此computed执行时，并未找到swiper内容，所以执行方法this.swiper.slideTo()报错,这也从正面证明了v-if的初始化较快，但切换代价高；）
<!--点击图片弹窗-->
<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>
console报错
