横向跑马灯应使用CSS动画+双份文案实现无缝滚动，垂直滚动则用scroll-view配合requestAnimationFrame驱动；需适配动态内容、真机渲染时机及用户交互响应。
别用 <marquee> 标签——它在 ios、多数安卓 webview 和所有小程序中都不生效，编译时还可能被直接忽略。
横向跑马灯优先用 CSS 动画 + 双份文案
这是目前兼容性最好、性能最稳的方案，H5、App、微信/支付宝/百度小程序全支持。关键不是“动起来”，而是“看不出断点”。
- 必须拼接两份相同文案，比如
"公告内容公告内容"，否则滚动到末尾会留白卡顿 -
animation-duration要和内容长度匹配：建议按每 10px 文字宽度配 1s 动画，太短会快得看不清，太长则像静止 - 容器必须设
white-space: nowrap和overflow: hidden，子元素用display: inline-block防止换行干扰 - 动画起点设
transform: translateX(0)，终点设transform: translateX(-100%)，靠父容器裁剪实现视觉循环
垂直滚动公告必须用 scroll-view + scroll-top 手动驱动
CSS 的 transform: translateY() 在真机上极易卡顿或闪退，尤其 iOS 微信；scroll-view 是原生滚动容器，映射为系统级 ScrollView，更可靠。
- 给
scroll-view设固定高度（如height: 40px）和scroll-y="true"，禁用enable-back-to-top - 每条公告用独立
<view>包裹，并设统一height，避免多行错位 - 用
requestAnimationFrame替代setInterval更新scroll-top，保证 60fps；暂停时只停 raf，不重置计时器，恢复后无缝衔接 - iOS 平台必须在设置
scroll-top前加this.$nextTick()或短延时，否则赋值可能被忽略
动态内容更新时要重置滚动状态
文本变了，但动画或 scroll-top 还在旧节奏上跑，会导致错位、跳帧甚至卡死。
- 内容为空或仅一条时，应主动关闭滚动逻辑（清 timer / cancel raf），否则出现“空跑”或无限重置
- 用
uni.createSelectorQuery().in(this)查文字真实宽度判断是否溢出，不能依赖offsetWidth > clientWidth—— uni-app 中 DOM 渲染时机不一致，onReady阶段可能还没挂载完 - 在
mounted后加setTimeout(() => {}, 0)或nextTick再查尺寸，确保节点已渲染 - v-for 渲染多个跑马灯？别这么做。改用单个容器 + 拼接多条公告（用
\n分隔 +white-space: pre-line），减少原生滚动实例数量
最易被忽略的其实是「用户交互响应」：H5 要监听 mouseenter/touchstart 暂停，小程序要用 catchtouchstart；滚动速度别写死像素值，按容器宽度比例算（例如每秒滚 0.2 倍容器宽），不然小屏快得看不清，大屏慢得像静止。
