详解swiper在vue中的应用(以3.0为例)

前端之家收集整理的这篇文章主要介绍了详解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) } }

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

猜你在找的Vue相关文章