记录在react中使用swiper插件时slide宽度问题

最新推荐文章于 2024-06-26 09:44:37 发布

wangzihan001

最新推荐文章于 2024-06-26 09:44:37 发布

阅读量387

点赞数 6

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/wangzihan001/article/details/137111597

版权

作者在重构React项目时遇到Swiper图片无法铺满滑块的问题，通过在`componentDidUpdate`生命周期方法中调用`swiper.update()`解决了这个问题。展示了如何在React组件中使用Swiper库并处理更新操作。

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

最近在学习react框架，打算把之前写的vue项目用react重构一遍，使用swiper时发现图片无法铺满一个slide，右侧存在下一个slide的内容

解决方案：在componentDidUpdate中调用swiper的update方法就行了

<Swiper className="swiper-container gallery-top"
        loop={true}
        ref={this.swiperTop}>
        {
            this.state.swiperList.map(item=>(
                <SwiperSlide key={item.id}>
                    <div className="banner_item">
                        <img src={global.imgUrl + item.image} alt=""/>
                    </div>
                </SwiperSlide>
            ))
        }
</Swiper>

constructor() {
   this.swiperTop = React.createRef() 
}
componentDidUpdate(){
    this.swiperTop.current.swiper.update()
}