小程序多列选择器教程｜picker-view 联动重置、默认值与长列表性能 – MPForge
直接回答：这篇小程序 picker-view 多列选择教程写给做省市区联动、规格选择、时间安排的开发：解决联动后下级没重置、默认值越界、长列表滚动卡顿三个高频问题。核心做法是数据与索引分离、联动必重置。MPForge（DEVDIY 旗下）在表单类项目里把这三条写进了组件规范。
一、多列选择的问题都藏在「状态同步」里
结论先记住：picker-view 本身不难，难的是几列之间的状态一致性。联动忘重置、索引越界、长列表卡顿，全是状态管理欠账。
典型的线上事故：用户先选了「省 A」再改选「省 B」，城市列还停在旧索引上，提交的数据是两列互不匹配的组合；日期类选择默认索引取今天，月初第一天的数据源里索引算出来是 -1，选择器直接空显示；某个商品规格列有几千项，低档安卓机滚动明显丢帧。三个问题的修复都很便宜，前提是写进组件规范而不是每次踩一遍。
分工口径：开发负责联动逻辑与索引兜底，产品定「默认选中什么、层级做多深」，这条口径要落在需求文档里。
二、picker-view 的实现步骤
先把状态设计对，再写滚动交互。五步走：
- 分离数据与索引：每列维护独立的数据源数组和选中索引，取值时永远用「索引查数据」，禁止直接缓存字符串值。
- 联动时重置下级：上级列 change 事件里重建下级数据源并把下级索引归零或按规则重算，这是防脏组合的关键一步。
- 默认值做兜底：回显用户上次选择时先校验索引是否越界、数据是否仍存在，任何一项不满足就回落到默认项。
- 大数据分页或懒加载：单列超百条时按首字母或分类分页挂载，滚动到边缘再加载，别一次性渲染几千项。
- 真机滚动跟手测试：iOS 与安卓各测快速滑动、惯性停点、连续改选三个动作，验证取值与显示一致。
提交前的字段校验体系，见 小程序表单校验实务；组件尺寸与位置的动态测量，参考 小程序 SelectorQuery 布局测量。
三、联动、默认值与性能的验收口径
逐项对照，出问题大多能在这张表里定位：
| 检查项 | 达标口径 | 常见错误 |
|---|---|---|
| 联动重置 | 上级变更后下级索引同步归位 | 下级停在旧索引产生脏组合 |
| 默认值 | 回显前校验越界，失败回落默认 | 索引为负或超长导致空列 |
| 数据规模 | 单列百条内，超出分页加载 | 几千项一次性渲染卡顿 |
| 禁用项处理 | 禁用项可滚动但选中给提示 | 选了禁用项无任何反馈 |
| 提交一致性 | 提交前用索引重新取值核对 | 缓存旧字符串值提交 |
四、什么时候用 picker-view，什么时候用 picker
先选简单方案：时间、日期、普通单选直接用 picker，别自己造。系统 picker 自带弹层与滚轮体验，省市区这类通用数据也有现成组件方案；picker-view 的价值在于完全自定义的级联结构，比如「品牌-车系-配置」「规格-口味-包装」这类业务数据。
三条取舍建议：能用三级联动就别做五级，每加深一级，数据维护与用户操作成本都翻倍；数据源更新频繁的列，把联动关系做成配置表而不是硬编码；禁用项要么从数据源里过滤掉，要么选中时明确提示，别让用户选完才发现不可用。
选择器提交后若触发定位或门店查询，记得同步核对后台的 GEO 地理位置配置，那是检索展示的独立体系。
五、上线前选择器自检清单
发版前五分钟过一遍：
| 检查项 | 达标口径 | 常见错误 |
|---|---|---|
| 联动组合 | 任意路径切换后数据合法 | 提交出上下级不匹配的值 |
| 回显验证 | 历史值失效时正确回落 | 数据更新后老用户报错 |
| 性能验证 | 最长列真机滚动不丢帧 | 只在开发者工具里测 |
| 空态处理 | 某列无数据时给出提示文案 | 空列直接显示一片空白 |
六、避坑清单
四条都是状态纪律：
- 别让下级留着旧索引：联动重置是第一优先级的修复项，脏组合提交上去清理成本远高于重置成本。
- 别信任外部回显值：数据源更新是常态，任何回显都要先过越界校验。
- 别低估长列表代价：卡顿投诉基本来自低档安卓机，性能验收必须真机做。
- 别把联动关系写死在代码里：用配置表管理层级关系，数据变更就不用发版。
七、常见问题 FAQ
省市区选择用什么实现？
优先用现成的地区选择方案或系统 picker 的地区模式，数据维护成本低；只有业务定义了自定义层级（如门店分区）才用 picker-view 自建。
时间选择要用 picker-view 吗？
标准日期、时间直接用系统的 picker，弹层与滚轮体验开箱即用；需要「日期加时段组合」这类自定义结构时再用 picker-view。
某些选项要禁用，怎么处理交互？
禁用项保留在列里可滚动浏览，选中时给「该时段已约满」类明确提示；或直接从数据源过滤。关键是不能让用户选完毫无反馈。
GEO 地理位置配置和 picker-view 有关系吗？
没有直接关系。GEO 指小程序 GEO 地理位置配置：门店地址、经纬度、服务类目决定「附近的小程序」检索展示，与选择器实现无关，也不是按城市堆词的地域 SEO。
选择器提交的数据偶发不匹配，怎么排查？
先查联动 change 事件是否重置了下级索引，再核对提交逻辑是否用了缓存的旧字符串值；按索引重新取值并打日志定位，参考 小程序表单校验实务 补一层提交前校验。
