swiper在vue中的使用 及 神坑
一、实例化和导入
import Swiper from 'swiper';
let viewSwiper;
let previewSwiper;
在外面声明全局变量,然后在初始化方法里面实例化swiper实例,该初始化方法在mounted里面调用。
二、坑s
1. 首先在vue里面初始化时数据肯定不是一成不变的,而是通过后台请求过来,或者父组件传入进来的,为了满足swiper能够动态监听数据,并刷新显示效果,需要添加上下面两个配置:
observer:true, //修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
2. 当设置loop:true,可能会导致图片的点击事件的失效。原理是:swiper动态的渲染dom时,只是‘复制粘贴’,且并没有把dom中的监听事件给‘复制’进来,进而导致事件监听事件失效。
在网上搜了好多,说是用swiper实例化中的点击回调函数(如下)
但依旧监听不到这个回调,后来把实例化中的 allowTouchMove: false, 注释掉,发现竟然可以了,懵逼~
on:{ click: function(e) { viewSwiper.slideTo(this.clickedIndex) } }
3.第三个问题是初始化数据之后,显示的确实最后一个slider,搞不懂后来网上寻找了一种方案,用slideTo(swiper自带)动态的还原到第一个slider。
this.$nextTick(function() { this.initSowingImg(); setTimeout(function(){previewSwiper.slideTo(0,0)},500); // 解决初始化进来后默认是最后一个slide的问题 });
4.第四个坑是,后来想在其父级组件中实例化多个swiper实例,也就是多个轮播图,发现并不能行,一直报错,然后果断弃坑自己写了个简单版的。
5.实例参数如下:loop 失效,loop不管是false,还是true,效果都是不能循环的,搞不懂~ 有没有大神解答下
previewSwiper = new Swiper('.preview .swiper-container', { slidesPerView: 'auto', loop: false, // allowTouchMove: false, 与回调冲突,设置true时,swiper点击回调经常失效。注释掉 observer:true, //修改swiper自己或子元素时,自动初始化swiper observeParents:true,//修改swiper的父元素时,自动初始化swiper on:{ click: function(e) { viewSwiper.slideTo(this.clickedIndex) } } })