我用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() 解锁，感觉比我上面提到的移除绑定事件会好点。
记录一下这个思路，今天就到这里了。
