Vant的NoticeBar怎么设置自动播放间隔? Code°海利 提问于 2026-01-30 22:36:23 阅读 62 组件 我在用Vant的NoticeBar做文字滚动时,发现自动播放的间隔时间太短了,改了duration属性没生效,怎么回事? 按照文档写了这样: 设置duration为5000毫秒,但实际滚动间隔还是1秒左右。试过重启服务、检查版本号都是最新版,控制台也没有报错,是不是哪里漏配了? 我来解答 赞 13 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 2 条解答 a'ゞ弯弯 Lv1 这个问题我之前也踩过坑。Vant的NoticeBar组件的duration属性确实不是用来控制播放间隔的,它只是动画持续时间。官方文档里确实没说清楚,坑了不少人。 通用的做法是用autoplay属性来控制自动播放间隔。正确写法应该是这样: v-model="text" :autoplay="5000" scrollable 注意autoplay的值默认是1000(毫秒),所以你要改成5000才对。duration那个属性其实是控制滚动动画速度的,数值太小的话动画会不流畅,一般保持默认就行。 我当时也是一头雾水,后来翻了官方的github issue才搞明白。建议你也试试这个参数,应该就能解决问题了。 回复 点赞 3 2026-02-07 07:03 A. 广云 Lv1 duration 是设置单条滚动的时长,不是间隔时间。你想改间隔需要用 delay 属性,试试这个: <van-notice-bar text="公告内容" delay="5" /> 文档写得有点绕,坑是挺深的,踩到了别气馁。 回复 点赞 6 2026-01-31 14:00 加载更多 相关推荐 2 回答 30 浏览 Vant按钮设置自适应高度后文字垂直居中失效怎么办? 我用Vant的Button组件时遇到个怪问题,给按钮设置了min-height: auto后文字突然不居中了。之前试过直接加line-height和flex布局都不管用,比如这样: .van-butt... ❤云超 组件 2026-01-27 08:36:23 1 回答 15 浏览 Vant按钮组件在iPhone14上字体和间距变形怎么办? 在React项目里用Vant的按钮组件,按照文档设置了rem基准值,但在iPhone14真机测试时按钮字体突然变大,左右间距也比设计稿宽了很多。 代码配置是这样的: import 'vant/lib/... Designer°一鸣 组件 2026-02-15 15:32:24 1 回答 25 浏览 Vant的Tab标签页怎么设置切换内容不生效? 我用Vant的Tab组件做页面切换,但点击标签时内容区域没变化,只有第一个页面显示。已经绑定了active属性,代码检查了好几遍也没发现问题: <van-tabs v-model:active=... ლ乐萱 组件 2026-02-12 23:39:23 2 回答 272 浏览 Vant的Popup弹出层设置position为bottom后为什么只显示顶部一条线? 在用Vant3的Popup组件做底部弹出层时,设置了position="bottom",但弹出后只能看到内容区域顶部一条细线,里面的内容被压缩成高度0了。我检查过内容区域有固定高度和overflow设... 公孙宇航 组件 2026-02-11 08:11:28 2 回答 12 浏览 Vant主题变量覆盖后样式没变化怎么办? 在用Vant3做主题定制时,按文档在变量文件里改了按钮颜色,但页面按钮还是默认蓝色。已经确认变量文件路径正确,也尝试过重启服务,但没效果。代码和配置都检查了好几遍,搞不懂哪里出问题了: // 在src... 上官馨阳 组件 2026-02-15 15:13:27 2 回答 70 浏览 Vant主题变量修改后颜色不生效怎么办? 我在用Vant组件库开发项目时,按照文档尝试自定义主题颜色,但修改了变量后页面颜色没变化。具体是这样操作的:在less文件里添加了@button-default-bg: #ff0000;,但按钮还是原... 司空远香 组件 2026-02-05 15:59:39 2 回答 81 浏览 Vant Tabbar的图标怎么在点击时保持选中状态? 我在用Vant的Tabbar做底部导航时遇到问题,点击标签后图标没有选中效果。我按文档写好了代码,但切换页面时图标一直显示默认状态,这是怎么回事? 代码是这样写的: <van-tabbar ro... 诸葛亚楠 组件 2026-02-05 05:23:25 2 回答 49 浏览 Vant组件在不同手机屏幕显示比例不对,怎么调整? 用Vant3写页面时,按钮和输入框在iPhone 13上显示正常,但到华为nova9上突然变小了一半,搞不懂为啥? 已经按文档设置了viewport和Config { standalone: true... 梓玥🍀 组件 2026-01-31 23:13:24 2 回答 120 浏览 Vant Cell的内容为什么总是撑开父容器? 在用Vant的Cell组件做卡片布局时,发现Cell的内容区域总是撑开父容器的高度,设置了flex:1也不管用。比如下面这样: <div class="card-container" style... Code°鹏宇 组件 2026-01-30 08:12:26 1 回答 28 浏览 Vant List的上拉加载事件为什么没有触发? 我在用Vant的List组件做上拉加载,但onLoad事件完全没反应。按照文档设置了loading和finished状态,滚动到底部也没触发加载更多。试过把immediateCheck设为true也没... Des.东宁 组件 2026-01-27 16:49:33
通用的做法是用autoplay属性来控制自动播放间隔。正确写法应该是这样:
:autoplay="5000"
scrollable
注意autoplay的值默认是1000(毫秒),所以你要改成5000才对。duration那个属性其实是控制滚动动画速度的,数值太小的话动画会不流畅,一般保持默认就行。
我当时也是一头雾水,后来翻了官方的github issue才搞明白。建议你也试试这个参数,应该就能解决问题了。
duration是设置单条滚动的时长,不是间隔时间。你想改间隔需要用delay属性,试试这个:文档写得有点绕,坑是挺深的,踩到了别气馁。