uni-app横向文字跑马灯不动，因scroll-view需配合white-space: nowrap、固定宽度及inline-block布局才能滚动；真·无缝滚动推荐css动画方案，用transform实现匀速循环，或直接使用swiper组件更可靠。
uni-app里用scroll-view做横向文字跑马灯为什么不动？
因为scroll-view默认不自动滚动，且scroll-x开启后需配合white-space: nowrap和明确宽度控制才能触发滚动条——但跑马灯要的是无缝循环滚动，不是拖拽式滚动条。
常见错误：只加scroll-x="true"、没设style="width: 100%; white-space: nowrap;"、子元素没设display: inline-block或flex布局，导致内容被折行，滚动失效。
实操建议：
- 用
scroll-view时，父容器必须有固定宽度（如width: 300px），子view加white-space: nowrap+display: inline-block - 滚动起点靠
scroll-left控制，需用ref调用scrollToLeft()方法，不能靠CSS动画模拟 - 真·无缝滚动需复制文本内容拼接两次，再用定时器逐步减小
scroll-left，到临界点时瞬间跳回起点（否则会卡顿）
用animation + @keyframes实现轻量级跑马灯更稳
CSS动画方案更适合纯文字横向滚动，不依赖JS逻辑，性能好、兼容性高（uni-app编译到小程序/H5/App都支持）。
关键点在于：动画时长要和文字总宽度匹配，且animation-iteration-count: infinite必须设置，否则只播一次就停。
实操建议：
- 外层
view设overflow: hidden，内层text用display: inline-block并计算出完整文字宽度（可用getComputedStyle或预估） - 动画从
transform: translateX(100%)开始，结束于transform: translateX(-100%)，确保移出视野再重置 - 避免用
left属性动画——小程序平台不支持非transform属性的硬件加速，会掉帧 - 示例片段：
@keyframes marquee {<br> 0% { transform: translateX(100%); }<br> 100% { transform: translateX(-100%); }<br>}
公告栏滚动需求下，swiper比手动滚动更可靠
如果公告是多条消息轮播（比如“系统维护中”“新版本上线”），别硬写跑马灯，直接用swiper组件，uni-app原生支持垂直/水平切换、自动播放、暂停交互。
容易踩的坑：在App端swiper默认禁用autoplay（iOS安全策略），必须显式设autoplay="true"；H5端则要注意interval单位是毫秒，别写成3以为是3秒——实际是3ms，疯狂切页。
实操建议：
- 单条公告用横向跑马灯，多条公告用
swiper，别混用 - 加
vertical="true"实现竖向滚动，比CSS动画更容易控制暂停/点击跳转 - 每条公告
swiper-item内可嵌套text+icon，但避免放button等可交互组件在swiper-item里，某些小程序平台会拦截点击事件
真要无缝循环跑马灯，得处理边界重置时机
用scroll-view或animation实现“一条消息反复滑过”，核心难点不在动，而在怎么让它看起来没头没尾——人眼能察觉到的停顿，基本都出在重置位置那一帧。
解决方案不是“快一点”，而是“准一点”：监听scroll-view的scroll事件，当scroll-left接近内容总宽时，立刻设为0；用CSS动画则需让@keyframes终点值略大于-100%（比如-100.1%），再用animation-timing-function: linear保证匀速，避免缓动造成速度变化暴露断点。
实操建议：
- 不要依赖
setTimeout估算时间来重置，设备性能差异会导致不同手机不同步 - 小程序平台
scroll-view的scroll事件触发频率低，不适合高精度控制，优先选CSS方案 - 若内容动态加载（比如API拉公告），记得在
onLoad后用this.$nextTick再启动滚动，否则DOM未渲染，宽度拿不准
swiper配vertical="true"，剩下20%才需要横向滚动——而那20%里，又有大半可以用CSS动画干净解决。手写JS控制scroll-left的方案，只在需要和用户交互（比如鼠标悬停暂停）时才值得投入。
