React
-解决 刷新页面后,swiper
轮播图失效 问题
一、问题分析
最近在项目中使用
swiper
实现轮播图时,遇到一个问题:当刷新页面后,轮播图失效了,即轮播图只播放了一次就不播放了。
- 在
react
中使用swiper
可以查看我的另一篇博客。
二、问题解决
在初始化
swiper
的外层加个定时器。
代码解决如下:
componentDidMount() {
// 定时器,防止轮播图只播放一次就不播放了
setTimeout(() => {
// 初始化swiper
new Swiper(".swiper-container1", {
pagination: '.swiper-pagination',
paginationClickable: true,
autoplay: 2000, // 自动播放
loop: true, // 循环播放
});
}, 500)
}