天天看點

記錄react中使用swiper插件遇到的問題

最近再學習react架構,想做想做一個輪播的元件,就先在網上扒拉了一下,開始照葫蘆畫瓢,先上圖,說一下問題

記錄react中使用swiper插件遇到的問題
記錄react中使用swiper插件遇到的問題
記錄react中使用swiper插件遇到的問題

 而且我已經重新設定的css樣式

記錄react中使用swiper插件遇到的問題

找了好久,最後發現問題,每個swiper-slide元素的寬度是750.4px,而每次輪播圖滑動時transform在X軸方向移動的距離是734px,讓我聯想到了在vue中使用swiper插件使用了

記錄react中使用swiper插件遇到的問題

就是在元件挂載完成時,會等css樹也挂載完成才去更新swiper,由于在react中不知時如何使用的,于是在建立swiper時增加了個定時器,如下圖

記錄react中使用swiper插件遇到的問題

這樣再來看效果就ok了,大功告成。