必须用 scroll-view + scroll-left + requestanimationframe 实现全端兼容的热搜滚动，禁用 marquee；需设 scroll-x="true"、white-space: nowrap、inline-block 子元素、number 类型 scroll-left、固定容器宽；双缓冲列表+nexttick 保障数据更新无缝，onready+$nexttick 获取 dom 尺寸。
热搜词滚动必须用 scroll-view，别碰 marquee
marquee 标签在 iOS、支付宝小程序和部分安卓 WebView 里压根不渲染，uni-app 编译时还会直接忽略它。真机跑起来就是静态文字，毫无滚动效果。所有“复制粘贴 marquee 就能用”的方案，上线后必然失效。
正确做法是用 scroll-view + scroll-left 手动驱动横向滚动，配合 requestAnimationFrame 控制帧率，保证 H5、App、微信/支付宝小程序全端平滑。
- 必须显式设置
scroll-x="true"和white-space: nowrap，否则文字换行或宽度塌陷，滚动直接失效 - 子元素（每条热搜词）要用
display: inline-block，不能只靠text标签撑开宽度 -
scroll-left必须是number类型，初始值写成"0"会导致后续+= 1变成字符串拼接（"01"、"011"） - 父容器设固定宽度（如
width: 750rpx），scroll-view加overflow: hidden
滚动逻辑要避开 setInterval，改用 requestAnimationFrame
用 setInterval 每 16ms 加 1px，在低端安卓机或微信小程序里极易掉帧、跳词、甚至卡死。尤其当页面有其他动画或接口请求时，定时器会严重偏移。
requestAnimationFrame 是唯一跨端稳定的节奏控制器——它绑定浏览器重绘周期，iOS 和小程序 WebView 都支持，且不会被 JS 主线程阻塞。
- 滚动速度别写死像素值，按容器宽度比例算：比如每秒滚动
0.15 * 容器宽度，适配不同屏幕 - 重置时机不是等滚到末尾，而是当
scrollLeft >= 总内容宽度 - 容器宽度时立刻设为0，避免停顿感 - 用户 touchstart 时必须
cancelAnimationFrame暂停，松手后恢复，否则手指拖拽时还在后台疯狂滚动
热搜数据动态更新时，滚动不能断、不能跳
后台推送新热搜（比如“#高考数学#”顶替“#端午出行#”），如果直接 this.hotList = newList，scroll-view 会瞬间重排、滚动位置归零，用户看到的就是“闪一下”，体验崩坏。
真正可行的方案是双缓冲列表：维持两份相同结构的数据副本，更新时只替换其中一份，并通过 v-if 切换渲染源，视觉上无缝衔接。
- 不要用
v-for直接遍历原始数组，改用计算属性返回拼接后的双倍数组（[...list, ...list]） - 更新数据后，用
this.$nextTick(() => { this.resetScroll(); })确保 DOM 重排完成再重置scroll-left - 每条热搜词加唯一
:key（如item.id或item.text + timestamp），避免 Vue 复用节点导致样式错乱 - 若需高亮“正在上升”词条，别用
class绑定布尔值，改用style动态注入color和transform: scale(1.05)，更可控
真机常见报错：Cannot read property 'clientWidth' of null
这个错误不是代码写错了，是组件还没挂载好就去读 DOM 尺寸。典型发生在 onLoad 里调用 this.$refs.scrollView.$el.clientWidth —— 此时 scroll-view 还没生成真实节点。
必须等视图真正就绪：优先用 onReady 钩子，再配合 this.$nextTick 获取尺寸；如果热搜数据来自接口，要在 setData 后再调一次 $nextTick。
- 计算单条热搜宽度时，别用
getBoundingClientRect()，它依赖真实 DOM，小程序里可能返回0；改用uni.getSystemInfoSync().windowWidth * 0.25这类估算值，误差可接受 - iOS 上
scroll-view的scroll-left有 1px 像素对齐问题，建议每次递增步长设为1.2而非整数，避免卡顿 - 支付宝小程序对
scroll-left更新频率有限制，超过 60fps 会降频，所以别盲目追求高帧率，30fps 已足够流畅
滚动本身不难，难的是让每一条热搜词在不同设备、不同网络延迟、不同更新频率下，始终保持着“刚刷出来就自然滑入视野”的节奏感——这要求你放弃一次性写完就扔的思路，把尺寸计算、帧率控制、DOM 就绪判断、数据更新同步全都拆开揉碎，各自兜底。
