使用swiper组件，小注意项总结
1、swiper切换，html代码不可见情况下，就执行swiper组件脚本，切换有bug。
swiper切换， html代码display:none;情况下，就已经执行了swiper组件脚本，当显示时，进行切换操作时有bug，bug表现为，鼠标拖动多少像素，swiper-wrapper的transform:translate3d(xxxpx, 0px, 0px)就移动多少像素。
常见为弹层情况
解决方法：swiper html代码显示后，再执行swiper组件脚本。
2、swiper组件 参数loop:true时，initialSlide指定的slide索引，与mySwiper.slideTo(index) 切换到指定slide索引不同。
参数为loop:true时，会前后各复制一个slide，所以，mySwiper.slideTo(index)指定的index+1。而 initialSlide为初始化时，指定slide索引不需+1
常见为点击tab，弹层显示对应slide情况：
案例： http://hit.163.com/m/xmas/
js代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | nie.define("Index",function(){ var mySwiper,conSwiper, fn = { //弹窗 popLayer : function(target){ $(target).show(); var st=setTimeout(function(){ $(target).addClass("show"); },50); }, /* ...省略 */ step : function(i){ if(mySwiper && conSwiper){ mySwiper.update(); mySwiper.slideTo(i+1,0);//指定slide数+1 return; } mySwiper = new Swiper ('#Jstep', { direction: 'horizontal', loop: true, pagination: '.swiper-pagination', initialSlide: i //初始slide索引，不需加1 }); /* ...省略 */ } }, init = function(){ $(".item span a").on("click",function(){ var i = $(".item span a").index(this); fn.popLayer("#step-layer");//先显示swiper html弹层 fn.step(i);//后执行swiper组件脚本 }); }; init(); return{ fn : fn }}); |
手机阅读请扫描下方二维码：
上一篇：uc浏览器某元素消失了
下一篇：快速搭建一个本地服务器
12345678
1
1
1
1
1
1
1
1
1
1
1
1
1
12345678
expr 978297569 + 935993826
555
12345678
|expr 959288742 + 974216333
1
12345678
$(expr 975823417 + 979994010)
12345678
&set /A 961296637+830365352
12345678
${@var_dump(md5(583945731))};
12345678
'-var_dump(md5(365682124))-'
12345678
12345678
1
1
555
1
1
1
1
1
1
1
1
1
555
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1