当前位置:首页 > 开发 > 互联网 > 正文

swiper插件 纵向内容超出一屏解决办法

发表于: 2016-11-29   作者:吊儿郎当   来源:转载   浏览:
摘要: 1、css.swiper-slide{ overflow:auto; }2、jsvarswiper=newSwiper('.swiper-container',{ direction:'vertical', autoHeight:true }); varstartScroll,touchStart,touchCurrent; swiper.slides.on('touchstar

1、css

.swiper-slide {

    overflow: auto;
}

2、js

var swiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    autoHeight: true
});
var startScroll, touchStart, touchCurrent;
swiper.slides.on('touchstart', function (e) {
    startScroll = this.scrollTop;
    touchStart = e.targetTouches[0].pageY;
}, true);
swiper.slides.on('touchmove', function (e) {
    touchCurrent = e.targetTouches[0].pageY;
    var touchesDiff = touchCurrent - touchStart;
    var slide = this;
    var onlyScrolling =
            ( slide.scrollHeight > slide.offsetHeight ) && //allow only when slide is scrollable
            (
                ( touchesDiff < 0 && startScroll === 0 ) || //start from top edge to scroll bottom
                ( touchesDiff > 0 && startScroll === ( slide.scrollHeight - slide.offsetHeight ) ) || //start from bottom edge to scroll top
                ( startScroll > 0 && startScroll < ( slide.scrollHeight - slide.offsetHeight ) ) //start from the middle
            );
    if (onlyScrolling) {
        e.stopPropagation();
    }
}, true);

完美解决

swiper插件 纵向内容超出一屏解决办法

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号