解決輪播圖組件異步加載後第一張爲最後一張圖的問題

我使用的是react-slick插件,其實無論哪個插件好像都沒有異常處理,你如果用本地資源去做加載的時候是不會出現異常的。但是當你使用如ajax去異步請求數據時就會出現問題。

原因:

當頁面還沒有接收ajax數據的時候,swiperList是空數組,輪播圖的初始創建是通過空數組創建的,當ajax獲取數據後,swiperList變成真正的數據項,再傳給子組件時,才獲取到新的數據,重新渲染新數據對應的圖片,因爲swiper的創建是根據空數組創建的纔會出現上面的問題。

解決:

所以辦法就是當list.length > 0 時候再去加載你的組件就行了,如下判斷。

 {banners.length > 0 && (
        <Slider> ... </Slider>)
 }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章