問題描述:
近期在Vue項目中使用Ant-Design的輪播組件——Carousel 走馬燈,遇到一個坑:在輪播元素上的數(shù)據(jù)綁定不生效雳攘,數(shù)據(jù)發(fā)生改變卻在頁面不進行渲染。正常輪播組件進行滾動式輪播畔裕,若想達到無縫連續(xù)循環(huán)滾動的效果是通過克隆輪播元素實現(xiàn)的昧狮。經(jīng)過調(diào)試發(fā)現(xiàn),此組件也不例外萧诫,頁面輪播展示的是原元素斥难,而數(shù)據(jù)綁定的卻在克隆的元素上,實際是對克隆元素有渲染的帘饶。
解決思路:
項目需要實現(xiàn)的效果是全屏垂直滾動哑诊,并非無縫循環(huán)滾動,僅需要單個輪播滾動及刻,可以不需要克隆元素
----》官網(wǎng)API無對應(yīng)參數(shù)設(shè)置
----》官網(wǎng)提示更多參數(shù)可參考vc-slick镀裤,由于無法打開,于是我通過查資料找到React Slick的API
找了一番發(fā)現(xiàn)這個參數(shù):infinite缴饭,設(shè)置之后就不會克隆元素暑劝,數(shù)據(jù)綁定直接在原元素生效~
<a-carousel
vertical
autoplay
:autoplay-speed="autoplaySpeed"
:infinite="isInfinite"
>
...
</a-carousel>
PS:
1.官網(wǎng)API其他無提及但其實很常用的參數(shù)配置也可以在React Slick 里面找找,例如verical茴扁、autoplaySpeed铃岔,經(jīng)驗證這兩個都可使用。
2.如果滾動形式是fade,也是不會克隆元素
effect="fade"