设置swiper滑动距离

2018-03-29  本文已影响0人  风间澈618

今天遇到一个需求就是去修改使用swiper的一个页面,原来的功能是在移动端要滑动很长一段距离才会翻页,现在要去修改这个滑动距离,让滑动看起来更灵敏。


2018-03-29_164753.png

因为是去看别人写的代码,还真是有点费时间。
开始是先去找的初始化swiper参数,看有没有相关的设置,
touchRatio
触摸距离与slide滑动距离的比率。
threshold
拖动的临界值(单位为px),如果触摸距离小于该值滑块不会被拖动。
但是发现初始化的参数中并没有相关设置,于是在一个上拉刷新和下拉加载的例子中发现了mySwiper.translate,获取wrapper的位移。于是才找到了原因,因为有一页内容超过了一屏,所以有一些改变。

 var iSwiper = new Swiper('.goods-swiper-container-cont', {
        scrollbar: '.swiper-scrollbar',
        direction: 'vertical',
        slidesPerView: 'auto',
        freeMode: true,
        roundLengths: true,
        mousewheelControl: true,
        mousewheelSensitivity: 0.5,
        onSetTranslate: function(swiper, translate) {
            //translate 一直为0,不可直接用
            //swiper.height是指容器高度而不是整个滚动内容的高度
            //判断当滑动距离超过多少时,才滑动到下一屏
            if(-swiper.translate > (swiper.slides[0].scrollHeight - swiper.height + 13)) {
                oSwiper.slideTo(1);
                $(".goods_content").removeClass('cur')
                $("#j-tab-con .swiper-slide img").click()
            }
            if(swiper.translate > 24) {
                oSwiper.slideTo(0);
                $(".goods_content").addClass('cur')
            }
            if(swiper.translate >= 0) {
                if($(".goods_content").hasClass('cur')) {
                    $(".goods_detail").css({
                        'transform': 'translate3d(0px, 0px, 0px)'
                    })
                }
            }
            if(oSwiper.activeIndex !=1) {
                goodsDiv1()
            }else{
                goodsDiv3()
            }
        }
    });
上一篇下一篇

猜你喜欢

热点阅读