Carousel总结
需求:轮播图:自动轮播,漏出下一项的一部分,向左移动,无缝连接切换
项目技术栈为react.js,Taro,typescript
难点:因为技术栈的原因,使用Taro的Swiper组件来写轮播,普通的轮播用这个组件可以完成,但是因为需求需要漏出下一项的一部分,Taro的Swiper组件没有这个属性,小程序的next-margin(在Taro里使用为nextMargin)可以满足这个需求,但是H5端不支持,所以解决方法要么是使用Swiper组件,兼容H5端,要么使用其他容器组件实现。
补充:在小程序或者Taro里,swiper组件的swiper-item组件的宽高默认继承swiper,宽高100%,所以无论怎么改宽度都没用,网上说高可以使用**!impotant**来改(ps:如果能改宽度,那么漏出下一项的一部分这个需求就很容易了,可惜。。。不能)
在开始尝试其他方法之前,我重新看了一遍Taro所有容器组件的文档,如果能使用Taro提供的那是最好的了,看完发现除了pass的Swiper组件,似乎ScrollView能实现。。。
-
尝试方