避坑+解决方案：Ant-Design-Vue 走马灯Carousel 数据绑定问题

Posted 2023-03-03

参考技术A

近期在Vue项目中使用Ant-Design的轮播组件——Carousel 走马灯，遇到一个坑：在轮播元素上的 数据绑定不生效 ，数据发生改变却在页面不进行渲染。正常轮播组件进行滚动式轮播，若想达到无缝连续循环滚动的效果是通过克隆轮播元素实现的。经过调试发现，此组件也不例外，页面轮播展示的是原元素，而数据绑定的却在克隆的元素上，实际是对克隆元素有渲染的。

项目需要实现的效果是全屏垂直滚动，并非无缝循环滚动，仅需要单个轮播滚动，可以不需要克隆元素
----》官网API无对应参数设置
----》官网提示更多参数可参考vc-slick，由于无法打开，于是我通过查资料找到 React Slick的API

PS:
1.官网API其他无提及但其实很常用的参数配置也可以在React Slick 里面找找，例如verical、autoplaySpeed，经验证这两个都可使用。
2.如果滚动形式是fade，也是不会克隆元素