uni-app中需拆解实现“吸附+折叠”搜索框：用position:sticky实现吸顶（避免fixed），配合uni-accordion实现折叠，异步内容需手动触发重绘或改用css max-height控制高度。
uni-app 里没有现成的“吸附+折叠”搜索框组件
官方 uni-search-bar 和第三方库（如 uView 的 u-search）都不直接支持「吸顶 + 折叠面板」耦合行为。所谓“吸附折叠搜索框”，本质是两个独立需求叠加：顶部固定（sticky）、内容可展开/收起。强行塞进一个组件里，反而容易失控。必须拆开实现 —— 先让搜索框吸顶，再套一层折叠逻辑控制其下方内容区。
吸顶搜索框要用 position: sticky，别用 fixed
很多人用 position: fixed 实现吸顶，结果发现：滚动时搜索框盖住下面内容、折叠面板高度计算错乱、iOS 下 input 失焦异常。正确做法是用 position: sticky 并包裹在 scroll-view 或页面根容器内：
- 外层容器必须有明确高度或 overflow-y: auto，否则 sticky 不生效
- 给搜索框父容器加
style="position: -webkit-sticky; position: sticky; top: 0; z-index: 999;" - 不要在
uni-search-bar上直接设 fixed —— 它内部已用 flex 布局，额外定位会破坏结构 - H5 和小程序都支持 sticky，但微信小程序基础库需 ≥ 2.7.0；App 端部分低端机型 fallback 为 static，需降级提示
折叠逻辑必须绕开 uni-collapse，改用 uni-accordion 或手写
uni-collapse 组件已在最新版 @dcloudio/uni-ui（≥1.4.0）中移除，直接写会报错：Component is not found in path "uni_modules/uni-collapse/components/uni-collapse/uni-collapse"。当前唯一官方维护的替代方案是 uni-accordion：
- 安装最新版：
npm install @dcloudio/uni-ui@latest - 注册并使用：
import uniAccordion from '@dcloudio/uni-ui/lib/uni-accordion/uni-accordion.vue' - 关键点：把搜索框放在
<uni-accordion-item></uni-accordion-item>的slot="title"里，内容区放搜索结果列表 —— 这样吸顶的是整个 accordion-item 标题栏，折叠控制的是下方区域 - 如果需要多开（比如多个筛选条件区），设
:accordion="false"，此时v-model必须是数组，不能是字符串
动态内容展开后高度塌陷？得手动触发重绘
搜索结果异步加载后，uni-accordion-item 内容区常出现高度为 0 或撑不开的情况。这不是 bug，而是组件在初始渲染时缓存了 DOM 高度，后续数据更新未触发重计算。解决方法只有两个：
- 在
uni.request成功回调后，加一句this.$nextTick(() => { this.$refs.accordion?.init() })—— 注意：不是所有版本都暴露init方法，uView 的u-collapse支持，但官方uni-accordion不提供此 API - 更稳的做法：放弃组件自动高度，改用 CSS 控制。给内容区 wrapper 加
style="max-height: 500px; overflow-y: auto; transition: max-height 0.3s ease-out;"，点击时 togglemax-height值（如 0 ↔ 500px），避免依赖 JS 测高 - App 端务必关掉动画：
:show-animation="false"，否则 height/max-height 过渡在低端 Android 上大概率卡顿或白屏
真正麻烦的不是代码怎么写，而是吸顶和折叠两个行为在不同平台上的渲染优先级冲突 —— 小程序里 sticky 容器内嵌 accordion，有时会展开后内容被截断；H5 下则可能因 document 流动导致 sticky 脱离视口。上线前必须在真机上逐平台验证滚动锚点和展开态保持逻辑。
