Swiper.js 内容高度超出屏处理

Swiper.js 3.X版本

处理办法：垂直滚动情况下，当滚动到内容超出屏的时候：

HTMl结构：对超出屏处理：再嵌套一层轮播结构

<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><!-- 第一屏 --></div><div class="swiper-slide"><!-- 我是超出屏 --><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><!-- 内容 --></div></div></div><!-- 我是超出屏 --></div><div class="swiper-slide"><!-- 第二屏 --></div></div></div>

 CSS :

 .swiper-slide-active{height:auto;// 设置嵌套子级超出屏当前高度// 滚动到当前超出屏，给到高度height:auto;}

 JS API：

?
//父swiper
var mySwiper = new Swiper('#swiper-container1'){}//子swiper
var mySwiper2 = new Swiper('#swiper-container2',{direction: 'vertical',//垂直切换mousewheelControl: true,//设置为true时，能使用鼠标滚轮控制slide滑动。mousewheelSensitivity : 0.8,//鼠标滚轮的灵敏度slidesPerView: 'auto',//如果设置为auto（例如制作全屏展示时的页脚部分）freeMode: true,//惯性滑动且不会贴合nested: true,//于嵌套相同方向的swiper时，当切换到子swiper时停止父swiper的切换		resistanceRatio: 0,})?

大概原理：滚动到需要展示超出屏的全部内容的时候，这时候父级取消往下滚动，停留在当前内容超出屏，然后嵌套的子级这时候就可以往下滑动。等子级或者超出屏内容到底部时，又恢复滚动继续往下滑。