问题描述:
近期在Vue项目中使用Ant-Design的轮播组件——Carousel 走马灯,遇到一个坑:在轮播元素上的数据绑定不生效,数据发生改变却在页面不进行渲染。正常轮播组件进行滚动式轮播,若想达到无缝连续循环滚动的效果是通过克隆轮播元素实现的。经过调试发现,此组件也不例外,页面轮播展示的是原元素,而数据绑定的却在克隆的元素上,实际是对克隆元素有渲染的。
解决思路:
项目需要实现的效果是全屏垂直滚动,并非无缝循环滚动,仅需要单个轮播滚动,可以不需要克隆元素
----》官网API无对应参数设置
----》官网提示更多参数可参考vc-slick,由于无法打开,于是我通过查资料找到React Slick的API
找了一番发现这个参数:infinite,设置之后就不会克隆元素,数据绑定直接在原元素生效~
<a-carousel
vertical
autoplay
:autoplay-speed="autoplaySpeed"
:infinite="isInfinite"
>
...
</a-carousel>
PS:
1.官网API其他无提及但其实很常用的参数配置也可以在React Slick 里面找找,例如verical、autoplaySpeed,经验证这两个都可使用。
2.如果滚动形式是fade,也是不会克隆元素
effect="fade"