需在页面级onpagescroll中监听scrolltop，用uni.createselectorquery异步获取各区块offsettop并比对，配合防抖与容差判断激活tab；点击tab则用uni.pagescrollto滚动并禁用自动同步。
uni-app 中如何监听页面滚动并触发 Tab 同步？
直接用 onPageScroll 监听页面滚动是最常用方式，但要注意它只在启用 enablePullDownRefresh 或页面有滚动内容时才生效；如果 Tab 是固定在顶部的自定义组件（非原生 tabBar），必须确保滚动容器是页面根节点或明确指定的 scroll-view。
常见错误：把 onPageScroll 写在子组件里——它只能写在页面级的 pages.json 对应的 .vue 文件中，且需在 export default 的 onPageScroll 选项里声明，不是 methods 里随便调用的函数。
- 页面级
onPageScroll回调接收{ scrollTop }参数，单位为 px，iOS 和 Android 表现一致 - 若使用
scroll-view，则必须监听其bindscroll事件，并取detail.scrollTop，不能混用 - 首次进入页面时
onPageScroll不会触发，需手动初始化 Tab 激活状态（比如根据 URL 参数或默认索引）
怎么让 Tab 项根据滚动位置自动高亮？
核心逻辑是：遍历每个分类区块的 offsetTop，判断当前 scrollTop 落在哪个区间。注意 uni-app 中无法直接用 getBoundingClientRect() 获取元素位置，得用 uni.createSelectorQuery() 异步获取。
容易踩的坑是：查询时机不对——必须等 DOM 渲染完成后再查，否则返回 top: 0；推荐在 mounted + $nextTick 后执行一次查询，并缓存结果，后续滚动中复用。
- 每个分类区块需设唯一
id（如category-0），便于 query 定位 - 查询时用
exec回调，不要 await（uni 的 query 不支持 Promise 化，除非自己封装） - 建议对
scrollTop + offset做 ±20px 的容差，避免快速滚动时频繁切换激活态
为什么滚动时 Tab 切换卡顿或不同步？
根本原因是频繁触发 onPageScroll 导致 setData 过于密集。uni-app 的 setData 在小程序平台有频率限制，H5 上虽无硬限但会阻塞渲染。
解决方案不是“节流”而是“防抖 + 差值判断”：只在 scrollTop 变化超过阈值（如 10px）时才重新计算激活项，且用 this.$forceUpdate() 替代 setData 更新 Tab 组件内部状态（前提是 Tab 是纯展示组件，不依赖响应式数据）。
- 避免在
onPageScroll里调用this.$nextTick或复杂计算 - 不要每次滚动都重新 query 所有区块位置，缓存
rects数组后仅比对数值 - 真机调试时注意 iOS 微信 WebView 的 scroll 事件延迟比 Android 高，可加
scrollTop += 40补偿导航栏遮挡
Tab 点击后如何平滑滚动到对应区块？
用 uni.pageScrollTo 是最稳妥的方式，不要用 scroll-view 的 scroll-into-view——后者在多层嵌套或动态渲染时经常失效，且不支持偏移量控制。
关键点在于目标区块的 offsetTop 必须减去顶部 Tab 高度（通常是 44px 或 45px），否则会盖住标题。这个值不能写死，要用 uni.getSystemInfoSync().statusBarHeight + 自定义导航栏高度动态算。
-
uni.pageScrollTo的duration设为 300ms 比较自然，设 0 会失去动画感 - 点击 Tab 后立即禁用滚动监听（比如设
isScrollingByClick = true），防止滚动过程中又触发自动同步 - 滚动结束后记得重置禁用标志，并手动触发一次
onPageScroll校准 Tab 状态
真正难的不是滚动本身，而是处理各种边界场景：页面刚加载时的初始定位、下拉刷新后的 DOM 重排、横竖屏切换导致的 offset 变化——这些都得靠缓存 + 重查机制兜底，而不是指望一次 query 一劳永逸。
