【已解决】swiper.js实现纵向切换滚动，“坑连坑”！

七娃博客 2020-12-28 1,475人阅读

记录一次swiper纵向多列上下切换的笔记，NND！垂直纵向真是个大坑！默认水平滚动切换简直弱爆了，相对于纵向切换，css不写，或者写死高度也会造成切换失效！
【已解决】swiper.js实现纵向切换滚动，“坑连坑”！-QUI-Notes

错误一：.swiper-wrapper高度写死

.course_menus .swiper-container{height: 360px;overflow: hidden;}

页面能切换，不过点击下一次的时候就不会动了，WHAT？什么鬼！
看api，发现slidesPerView和 slidesPerGroup很有必要设置一翻

slidesPerView 用了设置一屏显示多少个；
slidesPerGroup 用来表示一次滚动几条

错误二：slidesPerGroup按分组理解

官方的意思是分多少组，按照它的理解，我垂直滚动有多少个slide就要有多少个分组，然后就写了9，结果入“坑”了，点击又又又不会动了。看来我理解错了，那我随手改为1，发现每次滚动1个，又改成3，每次滚动3个。嗯，官方翻译错了，或者太过国际化，机智的我又自信起来！

这时，虽然能滚动，但是还是滚动一次，后面就失效了！MMP的，差点删除插件，自己手写一个了。

F12，点击next按钮，发现每次滚动的swiper-slide动态高度是400px，可是我没有设置这个高度啊？难度还和swiper-slide的高度有关系？不会吧！不会吧！

错误三：不给swiper-slide设置固定高度，导致使用默认高度100%

使用了默认高度，要么一次滚动了，但是看不到效果，要么没有就点击无效，WRA，实现一个效果被坑的走不出。

最后最后终于实现了：

关键css:

.course_menus .swiper-container{width: 100%;height: 100%;}
.course_menus .swiper-slide{height: 76px;height: auto;}

关键js:

var mySwiper = new Swiper ('.course_menus .swiper-container', {
   direction: 'vertical', // 垂直切换选项
   loop: false, // 循环模式选项
   slidesPerView:'auto',
   slidesPerGroup: 1,
   freeMode: true,

   // 如果需要前进后退按钮
   navigation: {
     prevEl: '.course-button .swiper-next',
     nextEl: '.course-button .swiper-prev',
   }
 })