Picker
picker滚轮选择器 · 多列 CSS scroll-snap 吸附 + 即时高亮居中项 + 停稳防抖 emit + 受控滚定位(零依赖·H5 选时间/地区)
用法
单列选择
单列滚轮，非受控用 defaultValue 设初始项。
tsx
<Picker columns={[fruits]} defaultValue={["orange"]} />多列联动
columns 传多列即多滚轮（如时:分），value 为各列选中值数组。
tsx
<Picker columns={[hours, minutes]} defaultValue={["9", "30"]} />可见行数
visibleCount 控制窗口高度（建议奇数），itemHeight 控制行高。
tsx
<Picker columns={[fruits]} visibleCount={3} itemHeight={36} />何时用
H5 / 移动端从一组有限离散值里选一项或多列联动值（时:分、省/市/区）时用，iOS 风格滚轮交互。弹出层式的列表动作选择用 ActionSheet；通常把 Picker 放进 ActionSheet 或底部抽屉里呈现。
导入
ts
import { Picker } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
columns * | PickerColumn[] | — | 各列配置（见下） |
value | string[] | — | 各列选中值数组（受控） |
defaultValue | string[] | 各列首项 | 非受控初始值 |
visibleCount | number | 5 | 可见行数（建议奇数） |
itemHeight | number | 40 | 行高 px |
className | string | — | — |
PickerColumn：options: PickerOption[] · flex?: number（列宽 flex 比重，默认 1）。
PickerOption：label: ReactNode · value: string。
Events
| 事件 | 类型 | 说明 |
|---|---|---|
onChange | (value: string[], columnIndex: number) => void | 某列选定后回调（完整值数组 + 变化的列下标） |
禁忌 / 坑
value/defaultValue是字符串数组，每项对应一列、值须命中该列options的某个value；列数与columns长度一致。- 受控下
onChange在滚动停稳（防抖）后才 emit，并带变化的列下标；高亮居中是即时的，但回调不是每帧触发。
相关
TabBar · Fab · ActionSheet · SwipeAction · PullToRefresh · SafeArea