记录react中使用swiper插件遇到的问题

最近再学习react框架,想做想做一个轮播的组件,就先在网上扒拉了一下,开始照葫芦画瓢,先上图,说一下问题

记录react中使用swiper插件遇到的问题_第1张图片

记录react中使用swiper插件遇到的问题_第2张图片

记录react中使用swiper插件遇到的问题_第3张图片

 而且我已经重新设置的css样式

记录react中使用swiper插件遇到的问题_第4张图片

找了好久,最后发现问题,每个swiper-slide元素的宽度是750.4px,而每次轮播图滑动时transform在X轴方向移动的距离是734px,让我联想到了在vue中使用swiper插件使用了

记录react中使用swiper插件遇到的问题_第5张图片

就是在组件挂载完成时,会等css树也挂载完成才去更新swiper,由于在react中不知时如何使用的,于是在创建swiper时增加了个定时器,如下图

记录react中使用swiper插件遇到的问题_第6张图片

这样再来看效果就ok了,大功告成。

你可能感兴趣的:(react,react,swiper)