禁用 mode="region",因其在H5与小程序中行为不一致、回显错乱;应改用 mode="multiSelector",手动同步三级索引、预处理为三层扁平数组、懒加载大数据、用索引驱动回显。

别用 mode="region",它在 H5 和小程序上行为不一致、数据不可控、回显错乱,上线后必踩坑。
为什么 mode="region" 不能用
微信小程序里它硬塞“市辖区”这种冗余项,H5 下最多只显示两级(省+市),且第三级(区)根本不会出现;更致命的是,直辖市如北京选“朝阳区”,value 可能返回 ["北京市", "北京市", "朝阳区"] —— 因为原生逻辑把“北京市”既当市又当区,无法剥离。你传进去的默认值 [0, 0, 1] 在 iOS 微信里只生效一次,后续 setData 完全不触发滚动位置更新。
mode="multiSelector" 必须手动同步三级索引
每次 @change 触发时,detail.value 是个三元数组(如 [0, 2, 5]),但它只是当前滚动结果,不是最终状态。你必须立刻用它更新三个响应式变量,并驱动下一级数据重算:
- 第一列变动(省)→ 清空市、区索引为
0,重载市数组 - 第二列变动(市)→ 清空区索引为
0,重载区数组 - 第三列变动(区)→ 不影响其他列,但要确保区数组已就绪
漏掉任何一次 this.provinceIndex = detail.value[0] 这类赋值,视图就会卡在旧位置,尤其在 iOS 上极其明显。
数据结构必须是三层嵌套数组,不能是树形
multiSelector 的 range 属性只接受 [provinceList, cityList, districtList] 这种扁平三维数组,不是 JSON 树。常见错误是直接把 areaData(含 children 字段)塞进去,结果第二列空白。
正确做法是预处理:先拉平省份列表;再根据选中省索引,从原始数据中提取对应 children 构建市数组;同理,用市索引取其 children 构建区数组。广东、河南等大省的区级单位超 100 个时,必须懒加载——别一次性把全部三级数据塞进 data,否则 H5 内存暴涨,小程序首屏卡顿。
回显和默认值要用索引驱动,别碰 value 数组初始化
想让 picker 默认选中“广东省→深圳市→南山区”,不要给 value 赋值 [2, 5, 12] 就完事。iOS 下它只认初始化那一刻,之后 setData 无效。真实做法是:
- 先查出“广东省”在
provinceList中的索引i - 再查“深圳市”在
cityList[i]中的索引j - 再查“南山区”在
districtList[i][j]中的索引k - 最后设置
multiIndex = [i, j, k]并触发forceUpdate或依赖响应式更新
这个过程必须在数据加载完成后再执行,否则 cityList[i] 是 undefined,j 查不到,最终选中错位。
最易忽略的一点:所有列数组必须是纯字符串或带 name 字段的对象(配合 range-key="name"),混用格式会导致某列渲染失败,且错误静默无提示。


















