Swiper单页面内的滑动

我们在使用Swiper做多屏幕切换效果的时候, 会遇到 在单页面内的长轴内容是无法滑动的,下面的代码 可以很好的去解决这个问题;

 其中,$(".container .slide.dreamer .dream-list") 是单个页面要滑动的内容

     var startScroll, touchStart, touchCurrent;
    
	$(".container .slide.dreamer .dream-list").on('touchstart', function(e) {
		startScroll = this.scrollTop;
		touchStart = e.targetTouches[0].pageY;
	});

	$(".container .slide.dreamer .dream-list").on('touchmove', function(e) {
		touchCurrent = e.targetTouches[0].pageY;
		var touchesDiff = touchCurrent - touchStart;
		console.log(touchesDiff);
		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
				(touchesDiff > 0 && startScroll > touchesDiff) ||
				(startScroll > 0 && startScroll + 1 < (slide.scrollHeight - slide.offsetHeight)) //start from the middle
			);
		if(onlyScrolling) {
			e.stopPropagation();
		}
	});

猜你喜欢

转载自blog.csdn.net/WEIGUO19951107/article/details/81431160
今日推荐