热搜词条升降箭头必须依据后端返回的rank与prev_rank字段显式计算：差值为0显示→，大于0显示↑，小于0显示↓；prev_rank为null或非数字时需特殊处理，避免误判。
热搜词条怎么显示上升/下降箭头
直接用数组下标判断排名变化是错的——后端返回的 rank 和 prev_rank 才是唯一可信依据。Vue 的响应式不会自动帮你算差值，必须显式计算并映射到图标。
- 前端只信任后端字段：
rank（当前名次）、prev_rank（上期名次），二者缺一不可 - 差值逻辑必须写死：若
prev_rank - rank === 0显示横线（→）；若 > 0 显示上升箭头（↑）；若显示下降箭头（↓） - 禁止用
index或渲染顺序替代rank排序，否则「上升最快」类业务指标必然错乱 - 图标建议用 uni-app 内置 iconfont 或 SVG，避免引入额外字体文件影响小程序包体积
filter 过滤器里怎么安全取差值
Vue2 的过滤器（filters）不能访问 this，所以不能直接调用方法或读取 data。必须把 prev_rank 和 rank 当作参数传入，否则会报 undefined。
- 模板中调用方式必须带全参数：
{{ item | getRankChange(item.rank, item.prev_rank) }} - filter 函数体内只做纯计算，不触发副作用：
getRankChange(rank, prevRank) {<br> if (typeof prevRank !== 'number') return '→'<br> const diff = prevRank - rank<br> if (diff > 0) return '↑'<br> if (diff < 0) return '↓'<br> return '→'<br>} - 注意：小程序平台对 filter 支持稳定，但 H5 端若开启 Vue3 模式（uni-app 3.x）则 filter 已废弃，需改用 computed 或 method
箭头颜色和样式怎么动态绑定
单纯显示文字箭头不够直观，需要颜色+尺寸强化视觉权重。但 uni-app 的 style 绑定在小程序里对某些属性（如 color）有兼容限制，不能直接写三元表达式。
- 推荐用 class 名动态切换：
:class="['rank-icon', getRankClass(item.rank, item.prev_rank)]" - 对应 CSS 定义三个 class：
.rank-icon-up { color: #f56c6c; font-size: 14px; }、.rank-icon-down { color: #909399; font-size: 14px; }、.rank-icon-stable { color: #c0c4cc; } - 避免在 style 中写
color: item.prev_rank > item.rank ? '#f56c6c' : '#909399'—— 微信小程序会忽略该计算，iOS 小程序可能渲染异常 - 安卓 App 端 webview 对内联 style 解析更宽松，但为跨端一致，仍建议走 class 方案
为什么 rank 变化没实时更新图标
常见原因是数据被浅拷贝覆盖，导致 Vue 无法检测 prev_rank 变更。尤其在使用 /api/hotlist/delta 增量更新时，仅 patch 部分字段，prev_rank 若未同步更新，图标就永远卡在旧状态。
- delta 更新必须完整替换原对象项，不能只改
rank字段：// ✅ 正确：用 Object.assign 或展开符替换整个项<br>const target = this.hotList.find(i => i.id === delta.id)<br>if (target) Object.assign(target, delta)
- ❌ 错误写法：
target.rank = delta.rank—— 不触发prev_rank的响应式更新，filter 拿到的仍是旧值 - 如果用的是
vuex或pinia，确保 mutation 中对热搜数组的操作是响应式的（比如用splice替换，而非直接赋值） - 真机调试时可在
console.log中打印item.prev_rank和item.rank，确认 delta 是否真正落地
实际最易被忽略的点：后端返回的 prev_rank 有可能是 null 或 0，而不是缺失字段。前端 filter 必须显式判断 typeof prevRank === 'number'，否则 null - 3 会得 -3，误判为下降。
