跑马灯必须用 scroll-view + scroll-top 动态控制，禁用 CSS 动画；滚动内容需单行固定高度，用 requestAnimationFrame 逐帧更新 scroll-top，重置时延时处理；翻转用 scaleY(-1) 而非 rotate(180deg)，仅作用于文本节点并设 overflow: hidden；真机滚动失效常因高度未设、嵌入可聚焦元素或事件冒泡被阻止；iOS 需关闭 bounce。
uni-app 里用 scroll-view 实现垂直滚动跑马灯，别用 animation
直接上结论：跑马灯公告必须用 scroll-view + scroll-top 动态控制，不用 CSS 动画，否则 iOS 上卡顿、安卓上跳帧、真机上容易闪退。
原因很简单：scroll-view 是原生滚动容器，uni-app 会把它映射成原生 UIScrollView（iOS）或 ScrollView（Android），而 CSS transform: translateY() 动画走的是 WebView 渲染线程，一卡全卡。
- 滚动内容必须是固定高度的单行文本，多行会错位；建议每条公告用
view包一层，设height: 40px这类统一值 -
scroll-top要配合setTimeout或requestAnimationFrame逐帧更新，不能靠setInterval硬刷——后者在后台页面或低性能设备上会堆积任务 - 滚动到底后要重置
scroll-top到 0，并延时再触发下一轮，否则会看到“回弹”或“卡住一帧”
<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="onScroll" style="height: 40px;">
<view v-for="(item, i) in list" :key="i" class="item">{{ item }}</view>
</scroll-view>文字上下翻转效果不是旋转，是用 transform: scaleY(-1) 配合定位
很多人搜“上下翻转”第一反应是 rotate(180deg)，但那是绕中心点旋转，会导致文字镜像颠倒（比如 “b” 变成 “q”），实际公告只需要视觉上“头朝下”，字形不变。
正确做法是沿 X 轴翻转：transform: scaleY(-1)，再用 position: relative + top 微调位置，否则翻转后文字会跑到容器外看不见。
- 必须给父容器设
overflow: hidden，否则翻转后的文字可能溢出显示半截 - uni-app 的
transform在 H5 和小程序平台表现一致，但 App 端（尤其是 iOS）需要加-webkit-transform兼容前缀 - 不要对
scroll-view内的滚动项直接加翻转——它会影响整个滚动逻辑，应该只作用在公告文本节点上
.flipped-text {
transform: scaleY(-1);
-webkit-transform: scaleY(-1);
position: relative;
top: -40px; /* 值 = 行高 */
}真机调试时 scroll-view 滚不动？检查这三处
常见现象：开发工具里滚动正常，手机上点不动、滑不起来、或者只能拖动一点点就停。
- 父容器没设
height或max-height——scroll-view必须有明确高度才能启用滚动，用flex布局时记得写flex: none或height: 40px - 滚动区域里嵌了
input、textarea或其他可聚焦元素 —— 这些组件在某些 Android 机型上会劫持 touch 事件，导致滚动失效 - 用了
@touchstart或catchtouchmove等阻止冒泡的事件 —— 尤其是在滚动区域外层加了手势识别，会吃掉原生滚动事件
滚动节奏不匀速？别用 scroll-top 线性递增
直接让 scrollTop 每 50ms 加 1，出来的效果是“一顿一顿”的机械感，人眼明显感知卡顿。真实跑马灯要模拟惯性滚动：开头加速、中间匀速、结尾减速。
- 推荐用缓动函数，比如
cubic-bezier(0.25, 0.46, 0.45, 0.94)，uni-app 的scroll-view支持scroll-with-animation属性，但仅限于点击跳转，动态滚动得自己算 - 更稳妥的做法是用
requestAnimationFrame控制帧率，每帧计算当前位移，而不是依赖定时器间隔 - 公告条数少于 3 条时，别做循环滚动——用户一眼扫完就结束了，硬滚反而干扰阅读
滚动逻辑本身不难，难的是在不同平台把“停顿感”和“跳变感”压到最低。尤其要注意 iOS 上 scroll-view 的 bounce 效果会干扰自动滚动，得关掉 bounce="false"。
