热搜词需在页面加载时通过 onLoad 预加载，禁用 onShow 请求；配合后端 max-age 缓存与前端 force-cache，加 Promise.race 超时兜底；hotList 用 Object.freeze 优化渲染，高亮加 key 强制刷新；历史记录限存10条、统一 uni.setStorage、去重需处理全半角空格；u-search 样式须用 radius="8" 等合规写法，聚焦时动态调整 scroll-top 防遮挡。
热搜词怎么从接口拿又不卡页面
热搜词必须在搜索页打开时就加载，不能等用户点进去再请求——否则白屏几秒，体验直接掉档。关键是用 onLoad 预加载，而不是靠 @input 或按钮触发。
- 别在
onShow里拉热搜：页面切回来会重复请求，且可能覆盖用户正在输入的内容 - 接口建议带缓存策略，比如后端返回
max-age=300，前端用uni.request的cache: 'force-cache'避免重复拉取 - 如果接口没做防抖兜底，自己加个简单超时控制：
Promise.race([fetchHot(), new Promise(r => setTimeout(r, 1500))])，防止卡死
热门搜索词列表怎么渲染才不闪、不跳
直接 v-for 渲染数组没问题，但“点击后高亮+加历史”这种交互，容易因响应式更新不及时导致视觉错位——尤其是 iOS 小程序里，scroll-view 套 flex 标签时重绘异常多。
- 热搜数据用
Object.freeze()包一层再赋值给hotList，避免 Vue2 的响应式劫持开销（uni-app 默认 Vue2） - 高亮状态不要只靠
:class切换，加个key强制刷新： - 点击热搜词后，先
this.keyword = item.name，再nextTick调用搜索，否则输入框光标可能丢失
搜索历史本地缓存的三个硬约束
历史记录不是“存了就行”，得兼顾容量、去重、跨端一致性。微信小程序 localStorage 有 10MB 上限，但实际写入超过 2MB 就容易触发异步写入延迟，造成点击无反馈。
- 最多存 10 条，用
uni.setStorageSync('search_history', list.slice(0, 10))，别让数组无限增长 - 判断重复不能只用
includes()，要忽略首尾空格和全角/半角空格：keyword.trim().replace(/[\u3000\s]/g, '') - H5 端用
localStorage，App 和小程序必须统一走uni.setStorage，否则清缓存逻辑不一致，用户会发现“手机上搜过，网页没记录”
u-search 组件改样式时最常踩的坑
很多人以为改 radius 或 bgColor 就完事，结果在 App 端圆角失效、iOS 键盘顶起后搜索框错位——根本原因是 u-search 内部用了 cover-view，而它不支持所有 CSS 属性。
- 圆角必须用
radius="8"（数字单位 rpx），写成"8rpx"或"8px"在 App 端直接忽略 - 背景色不能设在父容器上，得透传进组件：
:bg-color="'#f8f8f8'"，否则 H5 正常、小程序白屏 - 取消按钮隐藏要用
cancel-button="none"，写成false或"false"无效；微信小程序里还建议额外加@clear="handleClear"手动拦截
热搜词布局真正的复杂点不在样式，而在“用户还没输完，历史词就突然跳到顶部遮住输入框”——这通常是因为你没在 input 聚焦时动态设置 scroll-top，或者用了 position: fixed 却没处理键盘弹起的偏移。
