swiper使用过程中不断踩坑，有时一个很小的问题，如果用自己的方法实现的话会花很长时间，但其实swiper的api文档里一般都会有，所以得多研究研究它的api文档，网上查一下别人使用过程中遇到的类似问题，就可以大大缩短开发时间。特此记录一下开发中遇到的问题
一、：移动端的效果要求有以下几点：1.上方是轮播页和对应的分页器，下方需要给它们相对应的选择按钮 2.用户可点击选择按钮，上方将显示对应的内容块 3.用户可滑动上方的内容，下面的选择按钮相对应改变
问题1和3都比较容易解决，用swiper很容易实现，问题3需要用到swiper的回调函数或者自己都行，回调函数快一点，代码如下：
但是问题2因为对API文档不熟悉就遇到点麻烦了，首先考虑的也是用它的回调函数来点击按钮控制上面的相应的轮播，然后自己写了个方法，发现它的轮播是通过控制位置的改变，这时又要计算其每一块相对应的位置，这就很麻烦了，于是又回去找swiper的api，由于不熟悉的原因，很费力的才找到一个方法，发现非常简单就可以解决了，就一句：
mySwiper.slideTo(index, speed, runCallbacks)
Swiper切换到指定slide。
index:必选，num，指定将要切换到的slide的索引。
speed:可选，num(单位ms)，切换速度
runCallbacks:可选，boolean，设置为false时不会触发onSlideChange回调函数。
二、：一个页面里同时需要两个不同的轮播效果，看到这个首先又去查了apI，找到了命名空间里的wrapperClass和slideClass，觉得可以开始做
做出来的效果发现它们根本就做不了两个不用的轮播效果，想到可能是最外层.swiper-container的问题，于是又改了最外层的类名成my-container，原本效果应该只是在swiper-container这个容器里轮播的，如：
改了最外层类名成my-container后，效果就完全变了，会变成整个屏幕都可以滚动
百思不得其解，网上也找了，没发现什么问题，API文档里也没看到这个问题，经过多次的试验后，发现要改它的类，给同一个页面不同的轮播效果其实是可以的，但你要保留swiper自带的类名swiper-container就可以了
也可以给id来控制改变不同的效果，最主要的是保留swiper-container这个类名，同样的发现命名空间里的wrapperClass和slideClass的类名好像也是要保留的才没问题的，官方的Api文档里没有提到要保留，这个问题就都这里了
三：用到的一些属性：
1.freeMode
默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
2.slidesPerView
设置slider容器能够同时显示的slides数量(carousel模式)。
可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。
loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
3.loop
设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide并在合适的时候切换，让Swiper看起来是循环的。
loop模式在与free模式同用时会产生抖动，因为free模式下没有复制slide的时间点。
4.observer
启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
默认false，不开启，可以使用update()方法更新。
5.observeParents
将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。
6.centeredSlides
设定为true时，活动块会居中，而不是默认状态下的居左。
7.preventClicksPropagation
阻止click冒泡。拖动Swiper时阻止click事件。
网友评论