美文网首页
设置swiper滑动距离

设置swiper滑动距离

作者: 风间澈618 | 来源:发表于2018-03-29 16:55 被阅读0次

    今天遇到一个需求就是去修改使用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()
                }
            }
        });
    

    相关文章

      网友评论

          本文标题:设置swiper滑动距离

          本文链接:https://www.haomeiwen.com/subject/cytvcftx.html