Vant的NoticeBar怎么设置自动播放间隔?

Code°海利 阅读 62

我在用Vant的NoticeBar做文字滚动时,发现自动播放的间隔时间太短了,改了duration属性没生效,怎么回事?

按照文档写了这样:



设置duration为5000毫秒,但实际滚动间隔还是1秒左右。试过重启服务、检查版本号都是最新版,控制台也没有报错,是不是哪里漏配了?

我来解答 赞 13 收藏
二维码
手机扫码查看
2 条解答
a'ゞ弯弯
这个问题我之前也踩过坑。Vant的NoticeBar组件的duration属性确实不是用来控制播放间隔的,它只是动画持续时间。官方文档里确实没说清楚,坑了不少人。

通用的做法是用autoplay属性来控制自动播放间隔。正确写法应该是这样:

v-model="text"
:autoplay="5000"
scrollable


注意autoplay的值默认是1000(毫秒),所以你要改成5000才对。duration那个属性其实是控制滚动动画速度的,数值太小的话动画会不流畅,一般保持默认就行。

我当时也是一头雾水,后来翻了官方的github issue才搞明白。建议你也试试这个参数,应该就能解决问题了。
点赞 3
2026-02-07 07:03
A. 广云
A. 广云 Lv1
duration 是设置单条滚动的时长,不是间隔时间。你想改间隔需要用 delay 属性,试试这个:

<van-notice-bar text="公告内容" delay="5" />


文档写得有点绕,坑是挺深的,踩到了别气馁。
点赞 6
2026-01-31 14:00