swiper实现上下滑动翻页,内置内容页也滚动
如果我猜的没错,是全网(哈哈)比较少的成功解决方案,如需要转载,请声明并转载出处。
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);
super惠子的探实之路