swiper vue 初始化方法_详解swiper在vue中的应用(以3.0为例）

导读热词

一、使用方法

文章(点击我)

二、常见情况

图片需要动态获取时

待数据加载成功且渲染完毕后，进行节点初始化。例：

{

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 个)。

跳转的图片下标',10,false) // 10表示跳转速度；false 代表是否触发回到函数

数据方法配置

属性，如果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)

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

相关文章

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

如您喜欢交流学习经验，点击链接加入交流1群：1065694478(已满)交流2群：163560250