Vant的NoticeBar怎么设置自动播放间隔? Code°海利 提问于 2026-01-30 22:36:23 阅读 89 组件 我在用Vant的NoticeBar做文字滚动时,发现自动播放的间隔时间太短了,改了duration属性没生效,怎么回事? 按照文档写了这样: 设置duration为5000毫秒,但实际滚动间隔还是1秒左右。试过重启服务、检查版本号都是最新版,控制台也没有报错,是不是哪里漏配了? 我来解答 赞 23 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 2 条解答 a'ゞ弯弯 Lv1 这个问题我之前也踩过坑。Vant的NoticeBar组件的duration属性确实不是用来控制播放间隔的,它只是动画持续时间。官方文档里确实没说清楚,坑了不少人。 通用的做法是用autoplay属性来控制自动播放间隔。正确写法应该是这样: v-model="text" :autoplay="5000" scrollable 注意autoplay的值默认是1000(毫秒),所以你要改成5000才对。duration那个属性其实是控制滚动动画速度的,数值太小的话动画会不流畅,一般保持默认就行。 我当时也是一头雾水,后来翻了官方的github issue才搞明白。建议你也试试这个参数,应该就能解决问题了。 回复 点赞 13 2026-02-07 07:03 A. 广云 Lv1 duration 是设置单条滚动的时长,不是间隔时间。你想改间隔需要用 delay 属性,试试这个: <van-notice-bar text="公告内容" delay="5" /> 文档写得有点绕,坑是挺深的,踩到了别气馁。 回复 点赞 8 2026-01-31 14:00 加载更多 相关推荐 1 回答 27 浏览 Vant Swipe轮播图在React中不自动播放怎么办? 我在用 Vant 的 Swipe 组件做轮播图,设置了 autoplay 但根本没生效,图片就是不动。我明明照文档写了啊,是不是哪里漏了? 试过把 autoplay 设成 3000、true 都不行,... 一奕洳 组件 2026-03-26 21:34:22 2 回答 73 浏览 Vant按钮设置自适应高度后文字垂直居中失效怎么办? 我用Vant的Button组件时遇到个怪问题,给按钮设置了min-height: auto后文字突然不居中了。之前试过直接加line-height和flex布局都不管用,比如这样: .van-butt... ❤云超 组件 2026-01-27 08:36:23 2 回答 33 浏览 Vant 的 Popup 弹出层怎么在真机上点不消失? 我在用 Vant 的 Popup 组件,设置了 closeable 属性,浏览器里点关闭按钮能正常关闭,但在手机上点没反应,是啥原因? 试过加 z-index 也没用,控制台也没报错,就是点关闭叉号没... 上官爱慧 移动 2026-03-20 16:07:21 2 回答 49 浏览 Vant按钮组件在iPhone14上字体和间距变形怎么办? 在React项目里用Vant的按钮组件,按照文档设置了rem基准值,但在iPhone14真机测试时按钮字体突然变大,左右间距也比设计稿宽了很多。 代码配置是这样的: import 'vant/lib/... Designer°一鸣 组件 2026-02-15 15:32:24 2 回答 80 浏览 Vant的Tab标签页怎么设置切换内容不生效? 我用Vant的Tab组件做页面切换,但点击标签时内容区域没变化,只有第一个页面显示。已经绑定了active属性,代码检查了好几遍也没发现问题: <van-tabs v-model:active=... ლ乐萱 组件 2026-02-12 23:39:23 2 回答 299 浏览 Vant的Popup弹出层设置position为bottom后为什么只显示顶部一条线? 在用Vant3的Popup组件做底部弹出层时,设置了position="bottom",但弹出后只能看到内容区域顶部一条细线,里面的内容被压缩成高度0了。我检查过内容区域有固定高度和overflow设... 公孙宇航 组件 2026-02-11 08:11:28 1 回答 28 浏览 Vant 组件在不同手机上显示大小不一致怎么办? 我用 Vant 写了个移动端页面,但在 iPhone 和安卓机上按钮、文字大小看起来差别很大,明明没写死 px,也引入了 postcss-px-to-viewport 插件,为啥还是不统一? 我的 p... 文雅 Dev 组件 2026-03-31 02:00:12 1 回答 29 浏览 Vant 的 Tab 切换后内容没更新是怎么回事? 我用 Vant 的 Tab 组件做了一个分类筛选,但切换 tab 时页面内容没变,数据明明已经变了啊? 我试过在 on-change 里手动调接口,也用了 watch 监听 active 值,但 DO... 爱学习的庆敏 组件 2026-03-29 23:27:16 1 回答 45 浏览 Vant 的 Icon 图标不显示怎么办? 我在 Vue 项目里用 Vant 的 Icon 组件,按文档写了 <van-icon name="success" />,但页面上啥也没有,图标完全不显示。是不是还要额外引入什么样式或者字... 开发者尚萍 组件 2026-03-27 06:57:17 2 回答 516 浏览 Vant的Icon图标不显示怎么办? 我在用 Vant 的 Icon 组件时,图标根本没显示出来,只看到一个方框。明明按文档写了 <van-icon name="success" />,也确认引入了组件,但就是不生效。 是不是... 莉娟酱~ 组件 2026-03-22 10:03:19
通用的做法是用autoplay属性来控制自动播放间隔。正确写法应该是这样:
:autoplay="5000"
scrollable
注意autoplay的值默认是1000(毫秒),所以你要改成5000才对。duration那个属性其实是控制滚动动画速度的,数值太小的话动画会不流畅,一般保持默认就行。
我当时也是一头雾水,后来翻了官方的github issue才搞明白。建议你也试试这个参数,应该就能解决问题了。
duration是设置单条滚动的时长,不是间隔时间。你想改间隔需要用delay属性,试试这个:文档写得有点绕,坑是挺深的,踩到了别气馁。