uni-app中scroll-view滚动监听无法触发吸顶，需用scroll-view替代page onpagescroll，并动态获取tabtop判断吸顶临界点，用transform+占位元素避免跳动，小程序用cover-view解决z-index问题。
uni-app 中 scroll-view 滚动监听无法触发吸顶？先确认是否用了错误的滚动容器
uni-app 里实现“分类 Tab 吸顶”，最容易踩的坑是：直接监听 page 的 onPageScroll，却发现 scrollTop 始终为 0。这是因为页面根容器在多数平台（尤其微信小程序）默认不触发该生命周期——真正可监听滚动的，是显式声明的 scroll-view。
必须把分类 Tab 和内容列表都包裹在同一个 scroll-view 内，并设置 scroll-y="true"，否则 bindscroll 事件根本不会触发。
- Tab 栏放在
scroll-view内部顶部，不要用position: fixed提前脱离文档流 - 给
scroll-view设置明确高度（如height: calc(100vh - 44px)），否则可能无滚动条 - H5 端可用
page的onPageScroll，但小程序端必须依赖scroll-view
如何判断 Tab 是否到达吸顶临界点？别硬写像素值，用 boundingClientRect 动态获取
写死 scrollTop > 200 这类阈值，在不同屏幕、不同字体缩放下极易失效。正确做法是用 uni.createSelectorQuery() 获取 Tab 元素距页面顶部的真实距离（即它的初始 offsetTop），再随滚动实时比对。
注意：这个查询必须在 scroll-view 渲染完成后再执行，否则返回 null；建议在 onReady 或首次 scroll 触发后缓存结果。
- 在
data中定义tabTop: 0，初始为 0 - 在
onReady里调用：uni.createSelectorQuery().select('.tab-container').boundingClientRect(res => { this.tabTop = res.top; }).exec(); - 在
scroll回调中判断：if (scrollTop >= this.tabTop) { this.isSticky = true; }
吸顶后 Tab 脱离文档流，为什么内容会跳动？关键在 transform 替代 fixed
直接设 position: fixed 会让 Tab 脱离文档流，下方内容瞬间上移，造成视觉跳变。更稳妥的方式是：吸顶时用 transform: translateY(-${tabTop}px) 把 Tab “拉回”顶部位置，同时保持它仍在文档流中占位。
这样既实现视觉吸顶效果，又避免布局重排抖动。需配合一个占位元素（如空 view）撑开原始位置，高度等于 Tab 高度。
- 模板中：
<view class="tab-placeholder" :style="{ height: isSticky ? tabHeight + 'px' : '0' }"></view><view class="tab-container" :class="{ 'sticky': isSticky }" :style="{ transform: isSticky ? 'translateY(-' + tabTop + 'px)' : 'none' }">...</view> - 在
onLoad或onReady中通过boundingClientRect一并获取tabHeight - 避免在
scroll回调中频繁读取 DOM，所有尺寸数据应提前缓存
小程序真机调试时吸顶失效？检查 scroll-view 的层级和 z-index 陷阱
在微信小程序中，scroll-view 有独立的渲染层，其子元素的 z-index 在某些版本下会被忽略。如果吸顶后的 Tab 被其他组件遮挡（比如轮播图、弹窗），不是样式没生效，而是层级被截断了。
解决方案不是堆 z-index，而是把吸顶 Tab 提到 scroll-view 外层，用 position: sticky + top: 0 实现（仅 H5 支持），或改用 cover-view（仅小程序支持）包裹 Tab。
- 小程序推荐方案：
<cover-view class="tab-cover" :style="{ top: isSticky ? '0' : '-' + tabTop + 'px' }">...</cover-view>注意cover-view不支持v-for和复杂样式，只适合静态 Tab - H5 可直接用
position: sticky，但需确保父容器没有overflow: hidden - 真机测试务必开启“调试基础库版本”，低版本基础库不支持
cover-view的动态top
实际交互中，最易被忽略的是 scroll-view 的滚动方向与页面方向不一致导致的 scrollTop 符号问题，以及吸顶状态切换时未做防抖造成的频繁 setData。这些细节不处理，滚动就会卡顿或错位。
