Skip to content

Picker 滚轮选择器 ​

移动式滚轮列选择器:原生滚动 + 吸附提供惯性手感,滚动/键盘选中落停后回写 value 并派发 oas-change。支持独立多列(columns)与级联树(options)两种数据形态,form-associated 可直接进原生表单。适合移动端的日期式分栏、地区级联、规格多选等场景。

基础用法 ​

columns 传 JSON 数组(每列 { key?, label?, items: [{ label, value?, disabled? }] }),value 为各列选中值数组(value 缺省回退 label):

独立两列 + 事件反馈

滚动或方向键选择,这里显示 oas-change 反馈。

级联(options 树) ​

options 传树形 JSON(children 嵌套):列数随选中路径自动派生,父列变更时子列重建并复位到首可用项。columns 与 options 互斥(columns 优先):

省/市级联

切换省份列,城市列自动重建。

禁用项与整件禁用 ​

列内单项 disabled: true:落停到禁用项时自动吸附到最近可用项;整件 disabled 时滚轮不响应:

禁用项吸附 + 整件禁用

档位定制 ​

item-height(行高 px,默认 36)× visible-count(可见行数,默认 5,偶数自动归奇)决定滚轮高度;选中行高亮锚定选中行:

行高 44 + 可见 3 行

原生表单 ​

form-associated:有 name 时 FormData 提交 JSON 数组字符串;form.reset() 回初始值:

oas-form 提交

提交

提交后这里显示表单数据。

触屏与键盘 ​

  • 触屏/鼠标:滚轮列原生惯性滚动 + 吸附居中,滚动中实时高亮最近项,落停提交;
  • 键盘:列可聚焦(role="listbox"),↑/↓ 逐项移动、Home/End 跳首/末可用项(跳过禁用项);

API ​

oas-picker ​

属性 ​

属性说明类型默认值
columns独立多列数据(JSON 数组 [{ key?, label?, items: [{ label, value?, disabled? }] }];与 options 互斥且优先)——
disabled整件禁用(滚轮不响应、值不变)boolean—
item-height行高 px(正整数,非法回落默认)——
name原生表单字段名(form-associated:FormData 提交的键,值为 JSON 数组字符串)——
options级联树数据(JSON [{ label, value?, children: [...] }]);列数随选中路径派生,父列变更重建子列并复位首可用项——
required必填标记(驱动原生校验链 valueMissing:未选 = 未填)boolean—
value各列选中值(JSON 数组,项 value 缺省回退 label);落停回写反射,程序性写入只滚动不派发事件string[] | string—
visible-count可见行数(≥3,偶数自动归奇)——

事件 ​

事件说明
oas-change滚动/键盘选中落停后派发(程序性 value 写入不派发)。detail { value, labels, columnIndex }——value/labels 为全列当前口径,columnIndex 为本次变更列

基于 MIT OR Apache-2.0 双许可发布