原生导航栏无法直接显示搜索历史，因titleNView.searchInput是系统级组件，不支持DOM操作；需设navigationStyle为custom自定义头部，并在其下叠加历史列表。
原生导航栏本身不支持直接展示搜索历史列表，必须用自定义视图层叠加实现；但可以监听原生搜索框事件，在页面内渲染历史记录。
为什么不能在原生导航栏里直接显示历史记录
uni-app 的 titleNView.searchInput 是系统级组件，只提供输入框和确认按钮，不开放 DOM 操作权限，也没办法插入 view 或 scroll-view。所谓“在导航栏展示历史”，实际是：关闭原生导航栏（"navigationStyle": "custom"），自己画一个带搜索框的头部，再在它下方紧贴位置放历史记录列表。
强行想塞进原生导航栏会导致：
- 安卓/iOS 表现不一致，iOS 可能直接忽略自定义内容
- 真机上历史项点击无响应或聚焦错位
- 页面滚动时历史列表被截断或错位
onNavigationBarSearchInputConfirmed 触发后怎么存历史
这个生命周期钩子只在用户点击软键盘“搜索”或原生搜索按钮时触发，是唯一安全的存储时机——既避开 @input 频繁写入，又确保 keyword 已确定、非空、已 trim。
正确写法要点：
- 先校验
keyword && keyword.trim()，空字符串跳过 - 统一用小写 key：
'search_history'，避免大小写混用导致读不到 - 必须先
uni.getStorageSync('search_history') || []，不能直接 push 后 set - 去重逻辑要严格：用
toLowerCase()比对，再filter掉旧项，再unshift新项 - 最后
slice(0, 10)截取，防止数组无限增长
示例片段：
onNavigationBarSearchInputConfirmed(e) {
const keyword = e.detail.value?.trim() || ''
if (!keyword) return
const history = uni.getStorageSync('search_history') || []
const lowerKeyword = keyword.toLowerCase()
const filtered = history.filter(item => item.toLowerCase() !== lowerKeyword)
const newHistory = [keyword, ...filtered].slice(0, 10)
uni.setStorageSync('search_history', newHistory)
}
历史列表渲染时为什么点不中、不聚焦
最常见原因是 v-model 绑定变量名和赋值语句不一致，比如 input 写的是 v-model="searchValue"，但点击历史词时执行的是 this.inputText = word——Vue2 不会响应。
必须同步三件事：
- 确保
v-model和赋值目标变量名完全相同（含大小写、下划线） - 赋值后加
this.$nextTick(() => this.$refs.searchInput?.focus())，尤其安卓真机必须手动聚焦 - 如果用了防抖，点击历史词前先
clearTimeout(this.debounceTimer)，否则可能延迟触发旧搜索
清空历史后 UI 不更新怎么办
uni.removeStorageSync('search_history') 只删缓存，data 里的数组引用还是旧的。Vue2 对空数组响应不敏感，H5 和 App 环境下常卡住不动。
清空必须三步闭环：
- 执行
uni.removeStorageSync('search_history') - 置空 data 中数组：
this.historyList = [] - 强制刷新视图：
this.$forceUpdate()
少任何一步，UI 就可能停留在“已点清除，但列表还在”的静默失败状态。
