做有态度的前端团队

网易FEG前端团队

使用swiper组件,小注意项总结

1、swiper切换,html代码不可见情况下,就执行swiper组件脚本,切换有bug。

swiper切换, html代码display:none;情况下,就已经执行了swiper组件脚本,当显示时,进行切换操作时有bug,bug表现为,鼠标拖动多少像素,swiper-wrapper的transform:translate3d(xxxpx, 0px, 0px)就移动多少像素。

常见为弹层情况
201612301734.png

解决方法: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情况:
201612301737.png201612301738.png
案例: http://hit.163.com/m/xmas/

js代码:

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
    }

});

手机阅读请扫描下方二维码:

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif