不能靠uni-data-select或uni-data-picker直接实现三级联动滑动列表，因其range仅支持二维数组，无法表达“省→市→区”嵌套稀疏结构，且存在跨端解析不一致、无法响应滚动、禁用态控制难等问题；必须用scroll-view手动实现左右联动与高亮同步。
不能靠 uni-data-select 或 uni-data-picker 直接实现三级联动滑动列表——它们只支持二维结构或静态 range，而淘宝式分类是「一级固定导航 + 二级锚点滚动 + 三级动态内容区块」，必须用 scroll-view 手动控制滚动与高亮状态。
为什么 uni-data-picker 的 range 不适合三级分类联动
uni-data-picker 的 range 只接受二维数组（如 [["A","B"],["C","D"]]），无法表达「省→市→区」这种嵌套稀疏结构：比如“北京市”下有16个区，“澳门特别行政区”下只有7个堂区，且每个市的区列表长度不一。传进去的 range 会被扁平化或截断，导致第三级数据错位或丢失。
常见错误现象：uni-data-picker 在 H5 端显示正常，但小程序里第三列始终为空，或者滑动时卡死在某一项；调试发现 e.detail.value 返回的是索引数组而非真实值，还得手动查表映射，徒增复杂度。
- 它不响应右侧滚动位置变化，无法做「右侧滚动 → 左侧高亮切换」
- 无法控制单个三级项的禁用态（例如某市暂无区划，需灰显）
- App 端和小程序端对
range的解析逻辑不一致，容易跨端错乱
用 scroll-view 实现左右联动的核心三步
本质是两个 scroll-view 的滚动状态互相绑定：左侧点击跳转右侧对应区域，右侧滚动时左侧高亮项同步更新。关键不是写得多，而是节点定位准、节流稳、边界判断清。
- 左侧分类栏每个
view加唯一id（如id="cat-0"），注意命名只用小写字母和数字，小程序中含下划线会失效 - 在
onReady里用uni.createSelectorQuery().selectAll(".category-item")获取所有分类节点的top值，存入this.categoryTopList数组（H5 端务必套$nextTick(() => setTimeout(..., 100))防 height 为 0） - 右侧
scroll-view绑定@scroll="onRightScroll"，在回调里遍历categoryTopList，用scrollTop + itemHeight / 2作为判断基准，找出当前所属一级分类索引，再调用this.$refs.leftScrollView.scrollIntoView("cat-" + index)
三级内容怎么组织才不卡顿
别把三级全塞进一个 scroll-view 里滚动。淘宝实际做法是：一级为固定导航条（scroll-x），二级为左侧锚点菜单（scroll-y），三级为右侧按二级分组的区块集合，每个区块内部用 flex 或 grid 布局，不参与主滚动。
这样做的好处是：滚动只发生在两个独立容器，渲染压力分散；三级内容可懒加载（v-if 控制是否渲染某二级下的全部三级项），避免一次性挂载数百个 image 标签导致内存飙升。
- 二级菜单项点击时，只触发
this.currentLv2 = id，不立即请求三级数据，等右侧滚动进入可视区域再发请求 - 三级区块加
key（如:key="lv2Id"），确保切换二级时 DOM 正确销毁重建 - 若某二级下三级项超 50 条，改用
scroll-view+radio-group手动渲染，避开uni-data-checkbox的性能瓶颈
真正难的不是写完联动，而是处理滚动临界点——当用户拖到两个二级区块交界处时，高亮谁？这个判断逻辑一旦写错，左右就会来回抖动。建议统一用「当前 scrollTop 加半个区块高度」比对，而不是纯数值比较。
