Vant Swipe轮播图在React中不自动播放怎么办？

一奕洳提问于 2026-03-26 21:34:22 阅读 13

组件

我在用 Vant 的 Swipe 组件做轮播图，设置了 autoplay 但根本没生效，图片就是不动。我明明照文档写了啊，是不是哪里漏了？

试过把 autoplay 设成 3000、true 都不行，控制台也没报错，就是静止不动。下面是关键代码：

import { Swipe, SwipeItem } from 'vant';

function Banner() {
  return (
    <Swipe autoplay={3000} style={{ height: '160px' }}>
      <SwipeItem><img src="/img1.jpg" alt="" /></SwipeItem>
      <SwipeItem><img src="/img2.jpg" alt="" /></SwipeItem>
    </Swipe>
  );
}

我来解答赞 1 收藏

反馈

1 条解答

Newb.文亭 Lv1

看起来你在用 Vant 的 Swipe 组件，不过有几个地方需要注意。首先，Vant 在 React 里要用 useEffect 来确保组件挂载后才初始化自动播放。

试试这样改写：

import { useEffect } from 'react';

import { Swipe, SwipeItem } from 'vant';



function Banner() {

  useEffect(() => {

    // 确保组件挂载时初始化

  }, []);



  return (

    <Swipe autoplay={3000} style={{ height: '160px' }}>

      <SwipeItem><img src="/img1.jpg" alt="" /></SwipeItem>

      <SwipeItem><img src="/img2.jpg" alt="" /></SwipeItem>

    </Swipe>

  );

}

另外要注意，如果你在开发环境下使用的是 devServer，有时静态资源路径可能会有问题。建议检查下图片路径是否正确加载。如果还是不行，看看控制台的 network 请求，确认图片确实被正确请求到。

最后提醒下，有些版本的 Vant 可能对 React 支持不太完善，考虑升级到最新版本看看效果。这问题折腾起来挺烦人的，我都遇到过好几次了。

2026-03-26 21:35