原理:在内容位置区域,使用 e.stopPropagation();阻止事件冒泡(触发翻页),当滑动到顶部或者底部时,解除e.stopPropagation()。
.swiper-slide{
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
overflow: auto /*overflow :auto 必须*/
}
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);