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

最新推荐文章于 2024-04-07 09:59:21 发布

原创最新推荐文章于 2024-04-07 09:59:21 发布 · 440 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

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

最近在学习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()
}