uni-app商品分类左右联动的底层逻辑是双向滚动状态绑定：左侧滚动时右侧跳转对应区域，右侧滚动时左侧高亮同步切换；需用scroll-view手动处理scroll-top与scrollTop事件，结合节点布局信息映射，并注意节流、跨端兼容及边界判断。
uni-app 中实现商品分类左右联动的底层逻辑是什么
左右联动不是靠某个现成组件自动完成的，本质是两个列表滚动状态的互相绑定：左侧分类列表滚动时，右侧商品列表要跳转到对应区域；右侧商品列表滚动时，左侧高亮项要同步切换。uni-app 没有内置「锚点滚动」或「滚动监听节流」的跨平台统一方案，必须手动处理 scroll-view 的 scroll-top 和 scrollTop 事件，再结合节点布局信息做映射。
用 scroll-view 实现左右联动的关键步骤
必须用 scroll-view（不能用原生 view + CSS 滚动），否则无法触发滚动事件和控制滚动位置。常见错误是只给右侧加 scroll-view，漏掉左侧——左侧也需要监听 scrolltoupper 和 scrolltolower，但更重要的是响应右侧滚动后的主动跳转。
- 左侧分类列表：每个
scroll-view子项需用id标识（如id="cat-0"），并提前通过uni.createSelectorQuery()获取所有分类节点的top值，存入数组this.categoryTopList - 右侧商品列表：设置
scroll-y和@scroll="onRightScroll"，在回调中用scrollTop对比categoryTopList，找出当前可视区域所属分类索引 - 联动触发：找到索引后，调用左侧
scroll-view的scrollIntoView方法（传入对应id）或直接设置其scroll-top值 - 注意节流：
onRightScroll会高频触发，务必用setTimeout或uni.$once防抖，否则 iOS 下卡顿明显
为什么 uni.createSelectorQuery().selectAll() 在 H5 上不返回节点高度
H5 端 scroll-view 内部节点的 boundingClientRect 在首次渲染时可能未完成布局，导致 height 为 0。真机（App/小程序）通常没问题，但 H5 必须加等待时机。
- 不要在
mounted立即查节点，改用$nextTick+setTimeout(..., 100)双保险 - 查询时用
selectAll而非select，一次性获取全部分类节点，避免循环多次 query - 若仍失败，可 fallback 到预设固定高度（如每个分类项 80rpx），但需确保 UI 一致，否则联动错位
- 小程序端注意
id不能含下划线或大写字母，否则scrollIntoView失效
左右联动中容易被忽略的边界问题
最常出 bug 的不是主流程，而是滚动临界点判断：当右侧商品刚好卡在两个分类交界处时，该高亮上一个还是下一个？这个逻辑没统一，左右就会“抖动”。
- 推荐用「当前 scrollTop + 一半 item 高度」作为判断基准，而非纯
scrollTop，减少临界抖动 - 左侧点击跳转时，右侧应滚动到对应分类第一个商品的顶部，而不是分类标题底部——否则用户看不到商品内容
- App 端
scroll-view的scroll-into-view属性在某些版本不生效，必须改用scroll-top手动计算值 - 如果商品数据是分页加载，新增数据后必须重新执行节点查询，否则新分类项无
top值，联动失效
真正难的不是写通逻辑，而是让不同平台下滚动偏移、节点测量、事件触发时机都对得上。每次改一个参数，最好真机+H5+小程序三端都点开滚动测试一遍。
