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事件。