swiper做多屏滑动的时候,其中一页超高一屏的高度了。整体上就破坏了滑屏的整体感觉,但项目中有需要就需要修改啊。
需要修改的样式:
.swiper-slide { background: #f1f1f1; color:#000; text-align: center; overflow: auto; -webkit-overflow-scrolling: touch; }
js
var swiper = new Swiper('.swiper-container', { direction: 'vertical', initialSlide : 0, noSwiping : 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 ) && ( ( touchesDiff < 0 && startScroll === 0 ) || ( touchesDiff > 0 && startScroll === ( slide.scrollHeight - slide.offsetHeight ) ) || ( startScroll > 0 && startScroll < ( slide.scrollHeight - slide.offsetHeight ) ) ); if (onlyScrolling) { e.stopPropagation(); } }, true);
来源:https://blog.csdn.net/flower46273736/article/details/52687496