scroll-view左右滚动跑马灯不动，因未设white-space: nowrap且子元素未用display: inline-block导致换行、宽度不足；应改用CSS animation+translateX实现无缝循环滚动。
uni-app里用scroll-view做左右滚动跑马灯为什么不动？
因为scroll-view默认不触发自动滚动，且scroll-x开启后，内容宽度必须显式超出容器才能滚动——很多人只写了scroll-x="true"，但子元素是display: inline-block或没设white-space: nowrap，导致内容被换行、实际宽度不足，根本滚不起来。
实操要点：
- 外层
scroll-view必须设固定width和scroll-x="true"，同时加style="white-space: nowrap;" - 内部滚动文案需用
view包裹，并设display: inline-block（不能用text直接写，它不支持内联块级布局） - 若文字过短，可重复拼接两次：
const text = this.notice + ' ' + this.notice（中间用全角空格撑开） - 避免在
scroll-view上绑定bindscroll做手动控制——性能差，且容易卡顿
用animation + transform实现平滑循环滚动
CSS 动画方案更可控、更省资源，尤其适合公告栏这种固定文案、需无缝循环的场景。关键在@keyframes中让位移从0%到100%刚好等于文字总宽，再用infinite linear驱动。
注意点：
- 动画时长要根据文字长度动态算：
duration = (textWidth + containerWidth) / speed，硬写死10s会导致长短文案速度不一致 - 必须设
animation-timing-function: linear，否则开头/结尾会“顿一下” - 为防边缘露白，文案建议复制两遍并用
display: inline-block连排，动画位移终点设为-textWidth - 在
onReady里用this.$nextTick获取scrollWidth再启动动画，避免uni.createSelectorQuery查不到宽
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-200px); } /* 实际应动态计算 */
}
uni-app真机上跑马灯闪退或卡顿？检查这三处
Android低端机、iOS微信环境常见问题不是代码逻辑错，而是渲染层资源超限。
-
scroll-view嵌套在swiper或sticky区域里？立刻拆出来——多层滚动容器叠加会触发Webview重绘风暴 - 文字用了
rich-text或含image？跑马灯区域只放纯text或简单view，富文本解析开销大，动画必然掉帧 - 动画启用了
transform: translate3d(0, 0, 0)？uni-app H5端有效，但小程序端可能触发额外合成层，反而更卡；优先用translateX而非translate3d
公告栏需要暂停/点击跳转，怎么加交互？
别在动画元素上直接绑@tap——CSS动画期间部分平台（尤其是iOS WKWebview）会吞事件。正确做法是盖一层透明view，用pointer-events: none透出下层动画，再在外围包一个带@tap的容器。
- 暂停用
animation-play-state: paused切状态，不要clearInterval或删class，否则恢复时有延迟 - 鼠标悬停暂停仅H5有效，小程序需靠
touchstart+touchend模拟，且要防误触：加touch-action: none - 跳转前先
uni.navigateTo，别用window.open，后者在App端无效
跑马灯看着简单，真正稳定运行得盯住渲染路径、设备兼容性和交互响应链——尤其是动画帧率和事件穿透，这两处一松懈，用户第一眼就感觉“卡”或“点不动”。
