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

本文分享了在React中使用Swiper组件遇到的滑动偏移问题及解决方案。作者通过调整定时器策略,在组件挂载完成后等待CSS树加载完毕再更新Swiper,成功解决了轮播图在滑动时的定位不准确问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值