swiper版本为3.4.2。

因为效果需要,如果页面内容超过屏幕高度则先触发overflow的滚动条,当滚动条滚动到底部再触发swiper的页面滑动效果。

  1. var swiper = new Swiper('.swiper-container', {
  2. direction: 'vertical',
  3. });
  4. var startScroll, touchStart, touchCurrent;
  5. swiper.slides.on('touchstart', function (e) {
  6. startScroll = this.scrollTop;
  7. touchStart = e.targetTouches[0].pageY;
  8. }, true);
  9. swiper.slides.on('touchmove', function (e) {
  10. touchCurrent = e.targetTouches[0].pageY;
  11. var touchesDiff = touchCurrent - touchStart;
  12. var slide = this;
  13. var onlyScrolling =
  14. ( slide.scrollHeight > slide.offsetHeight ) &&
  15. (
  16. ( touchesDiff < 0 && startScroll === 0 ) ||
  17. ( touchesDiff > 0 && startScroll === ( slide.scrollHeight - slide.offsetHeight ) ) ||
  18. ( startScroll > 0 && startScroll < ( slide.scrollHeight - slide.offsetHeight ) )
  19. );
  20. if (onlyScrolling) {
  21. e.stopPropagation();
  22. }
  23. }, true);