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宽度,一屏也能够恰好展现三个了。