首页 > 其他 > 详细

swiper实现上下滑动翻页,内置内容页也滚动

时间:2017-01-21 18:36:16      阅读:2070      评论:0      收藏:0      [点我收藏+]
如果我猜的没错,是全网(哈哈)比较少的成功解决方案,如需要转载,请声明并转载出处。

swiper实现了上下滑动翻页,但是有几个页面的内容显示不完。如果一页显示不完时可以滑动查看,应该怎么做?
这个是我多次查找资料,发现关于这块的内容真正起作用的很少。


直接贴代码:

//控制页面滚动
    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实现上下滑动翻页,内置内容页也滚动

原文:http://www.cnblogs.com/huiziblog666/p/6306335.html

(1)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!