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

错误一:.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',
   }
 })   

最后总结一下:

1.垂直滚动时,必须设置.swiper-slide的固定高度,一定要固定,不能是100%百分比;
2.swiper官方的api,可以复制下来,多试试效果,根据效果理解,别看官方哔哔,毕竟人家是国外的插件翻译而来的。