vue-awesome-swiper 使用总结

1,099 阅读2分钟

swiper的功能很强大,此次使用主要用到了它的横向和竖向滚动,以及双向控制,自动轮播等vue-awesome-swiper基本使用方法文档上很详细。

  • 1.ie浏览器的兼容性,最开始研发的时候没有考虑到这个问题,后来测试才发现新版本不兼容ie11,最后还是退回了老版本v2.6.7,基本属性跟swiper3对其,跟新版用法上有些许不同,文档也比较清楚。
  • 2.我们项目最初的要求是swiper缩略图的样子,切换按钮,大图缩略图一起移动,在vue-awesome-swiper中使用的双向控制来实现的,这里遇到的问题是,缩略图active的那个和其他的图大小不一导致切换时并不是一直对其的,使用slidesPerView:auto 时大多数时候会跑偏,感觉没算准距离。slidesPerView值为具体数字时所有缩略图都是一样的大小。最终说服产品设成了一样的大小。
  • 3.双向控制还有一个坑,一般缩略图会比大图小一页能放下好几个,这样就导致左右切换按钮切换到最后一页数据会乱,当时是有34调数据在切换到27的时候数据会跳回23,没有持续增加。后来将loop设为true才避免了这样问题。
  • 4.刚解决完一个bug,又发现另外的问题,页面点击缩略图会偶尔出现点了没翻页的情况,频繁复现,只是页面滑动了一下下,后来发现是touchRatio这个属性影响了,页面可能以为我们在滑动,把touchRatio设为0就好了。
  • 5.swiper切换卡顿,当时swiper之外有个字段会根据当前选中的图显示不同的文字,结果导致轮播图的切换非常卡,后来把这个以来swiper数据的字段放入swiper里这种卡顿就消失了。