swiper垂直滚动子项内容加滚动

我用swiper来作为移动端页面的全屏滚动,然后碰到一个问题就是,我在子项的内容里面需要加入滚动的内容。这是很常见的一个需求,但是在swiper里面如果你设置了整个swiper为垂直滚动,然后里面的内容又有滚动,你会发现当你滚动字内容时,实际子内容并没有滚动,而是外面的整个swiper向上滚动了。

子内容的滚动,我使用了iscroll插件。

一开始我从swiper3的官网了解到了两个方法,分别是mySwiper.detachEvents()(移除所有监听事件)和mySwiper.attachEvents()(重新绑定所有监听事件),然后我通过给iscroll绑定事件里面来调用上面这两个方法,使我滚动字内容时,外面的swiper不会跟着滚上去,保证我的子内容可以滚动。代码如下:

window.mySwiper = new Swiper ('#Jswiper', {
	direction: 'vertical',
	mousewheelControl: true,
	speed:700,
	initialSlide:0,
	autoplay:false,
	loop:false,
	touchMoveStopPropagation : false,
	nextButton: '.icon-btn',
	onTransitionStart: function(mySwiper){
		if(mySwiper.activeIndex == ($('.part').length-1)){
			$(".icon-btn").hide();
		}else{
			$(".icon-btn").show();
		}
	}
});
var myScroll = new IScroll('#Jintro', {
	mouseWheel: true,
	scrollbars: true
});
myScroll.on('beforeScrollStart',function(){
	mySwiper.detachEvents();
})
myScroll.on('scrollEnd',function(){
	mySwiper.attachEvents();
})

两个插件分别是这里:

<script src="//js.3conline.com/js/ztlib/other/swiper3/swiper-3.4.2.min.js"></script>
<script src="//js.3conline.com/min/temp/v2/single-iScroll5.js" charset="gbk"></script>

是的,在只有一个内容的情况下这个方法是可以的。

但后来有多个iscroll时,有点麻烦,每个都有绑定一次。

我又认真去看了swiper官网的issues,我发现了它有一个pull request专门是解决这个bug的,nolimits4web/swiper#926,这篇文章说了很多方法。我从这里找到了一个比较简单的解决方法,那就是给我的外层swiper加一个参数叫:noSwipingClass : 'J_scroll'。我的代码如下:

window.mySwiper = new Swiper('#Jswiper', {
	direction: 'vertical',
	mousewheelControl: true,
	speed: 700,
	initialSlide: 0,
	autoplay: false,
	loop: false,
	touchMoveStopPropagation: false,
	noSwipingClass : 'J_scroll',
	nextButton: '.icon-btn',
	onInit: function() {
	},
	onTransitionStart: function(mySwiper) {
		if (mySwiper.activeIndex == ($('.part').length - 1)) {
			$(".icon-btn").hide();
		} else {
			$(".icon-btn").show();
		}
	}
});

作者是这样子解释这个参数的。ignoreTouchClass - 如果触摸了具有此类的元素,则将忽略该事件,这允许swiper内的元素使用原生滚动。

另外还看到另外一对方法,mySwiper.lockSwipes(),锁定Swiper,阻止其滑动。可以使用 mySwiper.unlockSwipes() 解锁,感觉比我上面提到的移除绑定事件会好点。

记录一下这个思路,今天就到这里了。

原文:swiper垂直滚动子项内容加滚动 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/swiper-iscroll.html)