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