uni-app怎么做类似于美团的分类双列表联动 uni-app滚动锚点监听实现【代码】-uni-app-PHP中文网

根本原因是未正确监听scroll-into-view或未触发scroll-top更新；需确保id精确匹配、右侧scroll-view设固定高度和scroll-y、用createselectorquery动态获取锚点位置并缓存，配合$nexttick保证dom渲染完成。

uni-app怎么做类似于美团的分类双列表联动 uni-app滚动锚点监听实现【代码】

uni-app 中用 `scroll-view` 做双列表联动，为什么左边不点右边不动？

根本原因不是 scroll-view 不能联动，而是你没监听 scroll-into-view 或没触发 scroll-top 更新。uni-app 的 scroll-view 不像原生那样自动同步滚动位置，必须手动控制右侧内容区滚动到对应锚点。

常见错误现象：scroll-into-view 绑定的 id 没加引号、id 值含空格或特殊字符、右侧 scroll-view 缺少 scroll-y 和固定高度、节点还没渲染完就调 scrollIntoView。

左侧分类列表点击时，要拿到对应右侧区块的 id（比如 "category-2"），然后赋值给右侧 scroll-view 的 scroll-into-view 属性
scroll-into-view 的值必须和目标元素的 id 完全一致（大小写、连字符都不能错）
右侧 scroll-view 必须设置 style="height: 600px;" 这类固定高度，否则无法触发滚动
首次进入页面时，建议用 $nextTick 确保 DOM 渲染完成再初始化滚动定位

监听右侧滚动，怎么让左边分类高亮跟着变？

不能靠 bindscroll 拿 scrollTop 然后硬算——不同机型、不同字体、不同 padding 下，每个区块的 top 值差异很大，极易错位。正确做法是用 createSelectorQuery 动态获取每个锚点区域的 boundingClientRect，再比对当前滚动位置。

性能关键点：不要在每次 scroll 里重复查所有节点，只查「可能进入视口」的几个；兼容性注意：H5 和小程序 selector 查询时机不同，App 端需加 uni.createSelectorQuery() 而非 this.$scope.createSelectorQuery()。

在 onReady 阶段预先查一遍所有 id 对应的 top 值，存进数组如 this.anchorTops = [{id: 'category-1', top: 0}, ...]
在 scroll 回调中，用当前 scrollTop + visibleHeight / 2 去匹配最近的 top 值，避免滚动过快时跳级
高亮状态用 currentActiveId 控制，模板里写 :class="{ active: item.id === currentActiveId }"

`scroll-into-view` 在微信小程序和 App 端表现不一致？

是的。微信小程序里 scroll-into-view 支持字符串 ID 直接滚动，但 uni-app 编译到 App 时，若目标节点在 v-for 里且 key 不稳定，会找不到节点；H5 端则对大小写更敏感，Category-1 和 category-1 视为不同。

容易踩的坑：scroll-into-view 是响应式属性，但如果你用的是 v-model 或计算属性中间层，没触发视图更新；或者在 watch 里改了值但没等 $nextTick 就再次触发滚动。

确保目标节点有明确、静态的 id，不要用 :id="'category-' + index" 这种依赖索引的方式（列表重排会失效）
改 scroll-into-view 后加一层 setTimeout(() => {}, 10) 或 this.$nextTick()，尤其在 tab 切换后首次滚动
调试时打印 uni.createSelectorQuery().select('#' + id).boundingClientRect()，确认节点是否真被查到