position: sticky在小程序中不生效是平台限制，需改用fixed+滚动监听动态控制；折叠动画须手动计算内容高度并配合$nexttick设置height，收起后需清空内联height以防响应式异常。
uni-app 里 position: sticky 在小程序中不生效怎么办
直接写 .search-box { position: sticky; top: 0; } 在 H5 上能用，但在微信/支付宝等小程序里会被忽略 —— 小程序 WebView 不支持 sticky 定位。这不是你代码写错了，是平台限制。必须换方案。
可行路径只有两条：用 fixed + 动态计算位置，或用 absolute + 滚动监听切换定位模式。前者更稳定，后者容易因滚动抖动导致“跳帧”。
- 优先用
fixed：设top: var(--status-bar-height)对齐状态栏下方，避免遮挡 - 给内容区预留高度（如
padding-top: 50px），防止 fixed 元素盖住首屏内容 - 不要依赖
boundingClientRect()在onPageScroll中反复查搜索框位置 —— 小程序里这个查询是异步的，e.scrollTop和查到的data.top可能不同步，导致吸附时机错乱
怎么让搜索栏支持折叠/展开且动画平滑
uni-app 的 view 不支持 max-height: 0 → auto 过渡，所以不能靠纯 CSS 实现折叠动画。必须手动控制 height 并配合 JS 计算真实内容高度。
- 初始状态：设
height: 0; overflow: hidden; - 点击展开时，先用
uni.createSelectorQuery().select('#search-content').boundingClientRect()获取内容区域高度 - 获取成功后，用
this.$nextTick(() => { ... })确保 DOM 渲染完成，再设置height到目标值（单位必须是px） - 收起时反向设回
0，动画结束后清空内联height（即设为''），否则响应式变化时高度会卡死 - H5 下可用
offsetHeight替代查询，更快；小程序必须走createSelectorQuery
折叠搜索栏和吸附逻辑如何共存不打架
吸附是“位置固定”，折叠是“高度变化”，两者叠加时最容易出问题的是：收起后 fixed 元素高度为 0，但占位还在，导致下方内容上移、滚动错位。
- 吸附状态只由滚动位置决定（比如
scrollTop > 100），和折叠状态无关；但渲染时要合并判断：isFixed && isExpanded才显示完整搜索栏 - 折叠收起后，
fixed的搜索栏高度为 0，此时需同步把内容区的padding-top改为0，否则留白过大 - 不要在
isExpanded变化时直接改position（比如从fixed切到static），这会导致布局重排闪动；始终用fixed，仅控制height和visibility - 如果用了
scroll-view而非页面原生滚动，记得监听的是@scroll事件里的detail.scrollTop，不是onPageScroll
为什么推荐用 uni-accordion 而不是手写 collapse
官方已移除 uni-collapse，当前最新版 @dcloudio/uni-ui（≥1.4.0）只保留 uni-accordion。它本质就是带折叠逻辑的容器，且内部已处理好高度动画、多端兼容、$nextTick 时机等问题。
- 如果你的“可折叠搜索栏”只是搜索条件区（比如品类筛选、价格区间），直接套
uni-accordion-item，标题放“筛选条件”，内容放表单控件 - 它默认支持单/多选、禁用、插槽自定义，比手写少踩 3 个坑：高度计算异步、过渡结束回调丢失、小程序 setData 频率限制导致动画卡顿
- 唯一要注意的是：
uni-accordion默认没有吸附能力，得在外层加 fixed 布局，并手动同步active状态与滚动逻辑
