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

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

一、问题分析🤔

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

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

二、问题解决❀

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

代码解决如下：

componentDidMount() {
    // 定时器，防止轮播图只播放一次就不播放了
    setTimeout(() => {
        // 初始化swiper
        new Swiper(".swiper-container1", {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            autoplay: 2000, // 自动播放
            autoplayDisableOnInteraction: false, // 设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。默认为true
            loop: true, // 循环播放
        });
    }, 500)
}