2022-05-24 工作记录--React-解决刷新页面后，swiper轮播图失效问题

React-解决 刷新页面后，swiper轮播图失效 问题

一、问题分析

最近在项目中使用swiper实现轮播图时，遇到一个问题：当刷新页面后，轮播图失效了，即轮播图只播放了一次就不播放了。

• 在react中使用swiper可以查看我的另一篇博客。

二、问题解决

在初始化swiper的外层加个定时器。

代码解决如下：

componentDidMount() {
    
    
    // 定时器，防止轮播图只播放一次就不播放了
    setTimeout(() => {
    
    
        // 初始化swiper
        new Swiper(".swiper-container1", {
    
    
            pagination: '.swiper-pagination',
            paginationClickable: true,
            autoplay: 2000, // 自动播放
            loop: true, // 循环播放
        });
    }, 500)
}