本文介绍了如何在Taro和React TypeScript环境下，面对需要展示下一张部分内容的轮播图需求，通过尝试不同方法，最终利用基本的View组件结合CSS样式实现了自动轮播、无缝切换的效果。难点在于Taro的Swiper组件不支持特定需求，而使用ScrollView、CSS动画或原生JS均存在局限。解决方案包括控制包裹图片的View宽度、动态计算marginLeft和拷贝图片实现无缝连接。
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能实现。。。
-
尝试方法一：使用ScrollView实现
经过尝试发现，ScrollView可以实现手动滑动图片的效果，但是要实现自动切换的话，需要使用onScroll这个事件来监听ScrollView容器距离左边的距离，然后使用定时器，几秒之后设定距离左边的距离或者使用marginLeft来控制距离左边的距离，但是！！！我忘了这个是可以手动滑动的啊！！！，要是在它自动轮播的时候，人为去滑动，那就会出问题了，所以Pass！
最低0.47元/天 解锁文章
扫一扫
636
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
