1. 无奈应用coverflow, fade等各种effect

依照vue-awesome-swiper官网文档装置后:

npm install swiper vue-awesom-swiper --save

发现无奈应用coverflow的3D成果,看了swiper版本是6以上的,vue-awesome-swiper的版本是4以上的。
swiper中文文档4-6版本的是有effect的,不晓得为什么用不了。看了vue-awesome-swiper上的issue,把swiper降到4就能用了。

npm install swiper@4.1.5

一开始想不到更新的版本居然会不反对3D成果,或者是vue-awesome-swiper的兼容问题,找了半天,终于升高版本解决了这个问题。

2. 引入css门路加dist/

同样依照官网文档引入css,然而终端却报错了:找不到swiper/css/swiper.css

// import style (>= Swiper 6.x)import 'swiper/swiper-bundle.css'// import style (<= Swiper 5.x)import 'swiper/css/swiper.css'

去node_modules外面看了一下,改成import 'swiper/dist/css/swiper.css'就不报错了。
不晓得构建的时候会不会有问题。

3. 应用coverflow成果时,想要实现挪动端一屏显示三个,又不心愿是等分的

如果是等分的很容易解决,只有设置swiper选项:slidesPerView: 3

然而我想实现如下设计稿:

这时如果同时在css外面设置swipe-slide的宽度,就会有很奇怪的成果,大家能够试一下。
最初我通过将slidesPerView:'auto',这样设置后就能够设置css宽度,一屏也能够恰好展现三个了。