swiper 插件里面嵌套可滚动内容

1，slide是固定一屏的

在移动端使用swiper的整屏滚动，如果slide里面有滚动内容的话，滚动的时候会整个页面一起滚动，如果想里面的滚动区域单独滚动的话，可以在初始化swiper的时候添加上 noSwipingClass 这个选项，值就是你想滚动的那个区域的class。

new Swiper('#Jswiper', {
    direction: 'vertical',
    noSwipingClass : 'scroll-wrap',
    }

参考链接：http://caibaojian.com/swiper-iscroll.html

 

2，slide高度不固定 ，必须在swiper-container为display:block的状态下初始化，即使设置了observer:true,observeParents:true,也是不行的

//swiper-slide里嵌套滚动容器  p.s.:需要滚动的slide的样式要添加 overflow-y:scroll;
                var startScroll, touchStart, touchCurrent; 
                
                mySwiper.slides.on('touchstart', function (e) {  
                    if(mySwiper.activeIndex == 0){  //actinveIndex 就是需要滚动的slide对应的index
                        startScroll = this.scrollTop;
                        touchStart = e.targetTouches[0].pageY;
                    }
                }, true);
                mySwiper.slides.on('touchmove', function (e) {  
                    if(mySwiper.activeIndex == 0){   //actinveIndex 就是需要滚动的slide对应的index

touchCurrent = e.targetTouches[0].pageY; var touchesDiff = touchCurrent - touchStart; 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 ( startScroll > 0 && startScroll < ( slide.scrollHeight - slide.offsetHeight ) ) //start from the middle  ); if (onlyScrolling) { e.stopPropagation(); } } }, true);