一、使用方法
文章（点击我）
二、常见情况
待数据加载成功且渲染完毕后，进行节点初始化。例：
{
this.pages = response.data; //pages 渲染数据的数组
this.$nextTick(() => { //渲染结束
// mySwiper 里面的属性按需配置，详情见官网
let mySwiper = new Swiper(".swiper-container",{
initialSlide :0,//默认播放（值为图片下标）
loop: false,//不循环
speed: 600,//切换速度
paginationClickable: true,//点击小点可以切换
});
});
});
当有 3 组图片需要依次播放时（多组以此类推）
情景：第 2 组图片滑动最后一张时,需要加载第 3 组图片；第 2 组图片滑动第一张时，需要加载第 1 组图片。
方法：在初始化的时候，配置回调函数onTouchStart(开始滑动的X轴值）和 onTouchEnd(结束滑动的X轴值）。用差值来判断是往前滑还是往后划。
{
let mySwiper = new Swiper(".swiper-container",{
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
onTouchStart: function(swiper) {
this.positionStart = swiper.getWrapperTranslate();
},onTouchEnd: function(swiper) {
this.positionEnd = swiper.getWrapperTranslate();
if (this.positionStart > this.positionEnd && this.pages.length - 1 == this.mySwiper.activeIndex) {
//向后滑，加载后一组图片
} else if (mySwiper.activeIndex == 0 && this.positionStart < this.positionEnd) {
//向前划，加载前一组图片
}
}
});
});
这时，图片已经加载了另外一组图片，但是各组图片之间没有连贯起来，这就需要用到 slideTo方法去跳转（若加载第 3 组，则跳转到下标第 0 个；若加载第 1 组，则跳转到下标第 图片个数-1 个）。
数据方法配置
属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
notNextTick: true,// swiper configs 所有的配置同swiper官方api配置
autoplay: 3000,// direction : 'vertical',effect:"coverflow",grabCursor : true,setWrapperSize :true,// autoHeight: true,// paginationType:"bullets",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)
// },// more Swiper configs and callbacks...
// ...
}
}
},components: {
swiper,swiperSlide
},// you can find current swiper instance object like this,while the notNextTick property value must be true
// 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},mounted() {
// you can use current swiper instance object to do something(swiper methods)
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
// console.log('this is current swiper instance object',this.swiper)
// this.swiper.slideTo(3,1000,false)
}
}
原文链接：https://www.f2er.com/vue/30066.html