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)
                    }
                }
            })

 

  

 

 

posted @ 2018-11-26 14:22  萤火虫不玩儿火  阅读(13628)  评论(0编辑  收藏  举报