最近做了一個基於react的可視化的大屏項目,
有一個需求是大屏的下半部分做一個輪播圖,一共三頁,每一頁都由幾個echarts圖構成,
但是,測試使用ant design組件庫里的Carousel走馬燈組件和其他一些第三方react輪播圖插件庫都會出現一個bug:
設置自動輪播autoplay后,最后一頁的echarts圖全部渲染不出來
找不到bug原因,猜測是因為:
這些走馬燈和輪播圖插件的實現原理是動態在現有的一組要輪播的頁面后,再追加一組,實現持續一個方向的頁面滾動。
echarts可能不能在追加的div上渲染
使用react-swipeable-views插件,可以解決這個問題。文檔:https://react-swipeable-views.com/api/api/
因為和上面提到的插件的輪播實現原理不同,沒有追加div,所以最后一頁echarts圖可以正常渲染
但也因為實現輪播的原理不同,所以有一個小缺點:最后一頁播放結束,會反方向回到第一頁,重新輪播。
注:插件需要通過npm 方式引用,如果需要擴展功能,可以把文件里需要的包自行install,改成自定義的組件引用。

