uni-app中搜索历史标签吸顶需用onpagescroll监听+动态fixed定位，因position:sticky在原生scrollview中失效；需节流处理、动态计算top值、flex-wrap换行并避免dom错位。
uni-app里搜索历史标签怎么“吸”到顶部不滚走
直接用 position: sticky 在多数场景下会失效——uni-app 的页面滚动容器不是标准 document，而是由 WebView 或原生渲染层控制的，sticky 依赖父容器有明确的滚动上下文，在 page 级滚动中常被忽略。真正在生产环境稳定工作的，是监听 onPageScroll + 动态切换 fixed 定位。
为什么不能只靠 CSS 的 sticky
uni-app 的 pages.json 中若开启 "enablePullDownRefresh": true 或使用了自定义导航栏，页面实际滚动主体是原生 ScrollView，CSS sticky 无法绑定到该滚动容器。实测在 iOS 和部分安卓 WebView 中，.history-tags { position: sticky; top: 0; } 完全无反应；更糟的是，它可能在 H5 端看似有效，但小程序端直接不兼容。
常见错误现象：
- 标签在 H5 正常吸顶，微信小程序里一滚动就消失
- 吸顶后内容区域被遮挡，padding-top 计算错乱
- 多个 sticky 元素堆叠时 z-index 失效
真正可行的做法是：
- 给搜索历史标签容器加唯一 ID，比如 id="historyTags"
- 在 onPageScroll 中用 uni.createSelectorQuery().select('#historyTags').boundingClientRect() 获取其初始 top 值
- 当 e.scrollTop > initialTop 时，触发 isSticky = true，并用 :class="{ 'fixed-history': isSticky }" 切换样式
- 样式中必须显式设置 top: var(--status-bar-height)（适配全面屏）+ z-index: 998
动态排版：历史标签数量不定时如何自动换行对齐
搜索历史通常是数组 historyList，长度不固定，且标签文字长短不一。硬写 flex-wrap: wrap 在某些安卓机上会塌陷，尤其配合 fixed 定位后。
关键控制点：
- 父容器设 display: flex; flex-wrap: wrap; gap: 8px;（gap 比 margin 更可靠）
- 每个标签用 flex: 0 0 auto; 防止拉伸变形
- 文字用 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 保底线高度一致
- 整体容器加 max-width: 100%; 避免横向溢出导致滚动条干扰吸顶逻辑
别踩的坑：
- 不要用 v-for 直接套 inline-block + width: 33%，响应式错乱
- 不要给标签设固定 height，不同字体渲染高度差异大，iOS 和安卓可能差 2px 导致换行错位
- 如果支持删除单个历史项，记得 splice 后调用 this.$nextTick(() => this.updateStickyState())，否则吸顶状态判断会基于旧 DOM 位置
吸附与滚动事件冲突怎么解
最常被忽略的一点：onPageScroll 触发非常频繁，不做节流会导致 createSelectorQuery 频繁执行，卡顿明显，尤其低端安卓机。
实操建议：
- 用时间戳节流，间隔至少 100ms：if (Date.now() - this.lastScrollTime <br>
- 把 <code>boundingClientRect 的查询结果缓存到 data 里，首次进入页面时获取一次，后续只比对 scrollTop
- 如果页面同时存在 scroll-view 局部滚动（比如商品分类 tab 内容区），必须区分监听源：全局滚动用 onPageScroll，局部滚动用 @scroll 并单独处理，否则两个滚动事件互相覆盖 isSticky 状态
性能影响很实在：未节流时，连续滚动 1 秒内可能触发 60+ 次查询；加了节流后稳定在 6~10 次，内存占用下降 40% 以上。
复杂点在于「吸附起点」不是固定像素值——它取决于状态栏高度、导航栏是否显示、甚至用户是否开启了刘海屏模式。所以永远别写死 top: 44px，务必用 var(--status-bar-height) + uni.getSystemInfoSync().navigationBarHeight 动态计算，否则 iPhone 15 Pro 和 Redmi Note 12 上的表现会截然不同。
