uni-app搜索框平滑展开需视觉分离：先动画扩展容器宽度，再$nextTick聚焦；软键盘不顶起页面需配置softinputMode为adjustPan；搜索历史点击即搜应同页切换而非跳转；iOS placeholder偏移可改用绝对定位text模拟。
uni-app里搜索框聚焦时如何平滑展开？
直接用 input 的 focus 事件 + 动态绑定 width 或 transform 是行不通的——uni-app 的 input 在 iOS 上 focus 后会强制触发软键盘，导致视图重排、动画卡顿甚至中断。真正能稳定过渡的方式是「视觉分离」：把搜索框默认状态做成窄样式（比如带放大镜图标），点击后不立即聚焦，而是先用 animation 扩展容器宽度，再 this.$nextTick(() => this.$refs.searchInput.focus()) 延迟聚焦。
- 必须给搜索区域包一层
view并设overflow: hidden，否则动画过程中文字溢出或图标错位 - 不要用
transition: width配合v-if切换，v-if会销毁/重建节点，iOS 下 keyboard 弹起时机不可控 - 推荐用
transform: scaleX()+opacity组合动画，性能更好，且避免 layout 触发
怎么让搜索框获得焦点后软键盘不顶起页面？
这是 uni-app 在 App 端最常被忽略的兼容点：input 聚焦后默认会滚动到可视区顶部，同时软键盘顶起整个 web-view 容器。微信的处理是「固定搜索栏位置，只让内容区下移」。实现关键在于关闭 pageStyle 的自动调整，并手动控制 scroll-top。
- 在
pages.json对应页面配置中加"softinputMode": "adjustPan"（App端有效） - H5 端需监听
keyboardheightchange事件，动态设置 body padding-bottom，但注意 uni-app H5 不支持该事件，得改用window.addEventListener('resize')+document.activeElement === inputEl判断 - 真机调试时发现键盘收起后页面没回弹？要监听
blur事件并调用uni.pageScrollTo({scrollTop: 0})，不能依赖 CSS 过渡
搜索历史和热门词怎么做到「点击即搜」且不闪屏？
很多人用 v-for 渲染历史列表，点击后跳转新页面再传参，结果返回时整个搜索页重新渲染，输入框失焦、光标消失。正确做法是全程保留在同一个页面，只切换显示逻辑。
- 历史项点击后不要
uni.navigateTo，而是直接赋值this.searchValue = item，然后调用搜索函数 - 热门词区域建议用
scroll-view横向滚动，但必须设scroll-x和white-space: nowrap，否则在 Android 微信内置浏览器里会换行错乱 - 清空历史按钮点击后记得
uni.removeStorageSync('searchHistory')，别只删数组——下次进页面还要读缓存
为什么 iOS 上搜索框 placeholder 会偏移或截断？
这是 input 组件在 iOS Webview 下的固有渲染 bug：当父容器有 flex 布局 + padding + font-size 变化时，placeholder 垂直对齐会失效。不是样式写错了，是底层渲染层没对齐文本基线。
- 临时解法：给
input加line-height: 1.5且与font-size成比例（如 font-size: 14px → line-height: 21px） - 更稳方案：不用原生
placeholder，改用一个绝对定位的text标签 +v-show="!searchValue"模拟 - 别在
input上设padding-left来躲放大镜图标，改用background图标 +padding-left: 30px，否则 placeholder 文字会和图标重叠
实际做下来，最难调的不是动画曲线，而是 iOS 键盘弹起/收起过程中的 scroll 时机和 focus 状态同步——哪怕只差 16ms，用户就会觉得“卡了一下”。建议所有动画 delay 都用 $nextTick 包一层，别信 setTimeout(0)。
