# 选择器视图 PickerView

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/picker-view
- 资源: Ant Design Mobile (https://jiguang132.com/zh/resources/ant-design-mobile.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design-mobile/docs.md

PickerView 系列一共包括了三个组件：[PickerView](#pickerview)、[CascadePickerView](#cascadepickerview)、[DatePickerView](#datepickerview)。

## 安装

```bash
npm install antd-mobile@5.43.0
```

antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 `unstableSetRender` 注册 `createRoot`，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 `<html data-prefers-color-scheme="dark">` 切换。

示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 `DemoBlock` 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。

PickerView 系列一共包括了三个组件：[PickerView](#pickerview)、[CascadePickerView](#cascadepickerview)、[DatePickerView](#datepickerview)。

## PickerView

PickerView 是 [Picker](/zh/components/picker/#picker) 的内容区域。

### 示例

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| columns | 配置每一列的选项 | `PickerColumn[] \| ((value: PickerValue[]) => PickerColumn[])` | - |
| defaultValue | 默认选中项 | `PickerValue[]` | `[]` |
| mouseWheel | 是否允许通过鼠标滚轮进行选择 | `boolean` | `false` |
| onChange | 选项改变时触发 | `(value: PickerValue[], extend: PickerValueExtend) => void` | - |
| renderLabel | 自定义渲染每列展示的内容 | `(item: PickerColumnItem) => ReactNode` | `(item) => item.label` |
| value | 选中项 | `PickerValue[]` | - |
| loading | 是否处于加载状态 | `boolean` | `false` |
| loadingContent | 加载状态下展示的内容 | `ReactNode` | `默认提供了转圈加载中的加载效果` |

关于 `PickerColumnItem` `PickerColumn` `PickerValue` `PickerValueExtend` 的类型定义，请参考 [Picker](/zh/components/picker) 的文档。

### CSS 变量

| 属性             | 说明                                 | 默认值  |
| ---------------- | ------------------------------------ | ------- |
| --height         | 整体的高度                           | `240px` |
| --item-font-size | 选项的字号                           | `16px`  |
| --item-height    | 选项的高度，仅支持 px rem 和 vw 单位 | `34px`  |

## CascadePickerView

CascadePickerView 是 [CascadePicker](/zh/components/picker/#cascadepicker) 的内容区域。

### 示例

### 属性

| 属性    | 说明           | 类型                    | 默认值 |
| ------- | -------------- | ----------------------- | ------ |
| options | 树形的选项数据 | `CascadePickerOption[]` | -      |

关于 `CascadePickerOption` 的类型定义，请参考 [CascadePicker](/zh/components/picker/#cascadepicker) 的文档。

其他属性同 [PickerView](#pickerview)，但不支持 `columns`。

### CSS 变量

同 `PickerView`。

## DatePickerView

DatePickerView 是 [DatePicker](/zh/components/picker/#datepicker) 的内容区域。

### 示例

### 属性

```typescript
type PickerDate = Date & {
  tillNow?: boolean
}
```

| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| defaultValue | 默认选中项 | `PickerDate` | - |
| filter | 过滤可供选择的时间 | `DatePickerFilter` | - |
| max | 最大值 | `PickerDate` | 十年后 |
| min | 最小值 | `PickerDate` | 十年前 |
| mouseWheel | 是否允许通过鼠标滚轮进行选择 | `boolean` | `false` |
| onChange | 选项改变时触发 | `(value: PickerDate) => void` | - |
| precision | 精度 | `'year' \| 'month' \| 'day' \| 'hour' \| 'minute' \| 'second' \| 'week' \| 'week-day' \| 'quarter'` | `'day'` |
| renderLabel | 自定义渲染每列展示的内容。其中 `type` 参数为 `precision` 中的任意值，`data` 参数为默认渲染的数字 | `(type: string, data: number) => ReactNode` | - |
| value | 选中项 | `PickerDate` | - |
| loading | 是否处于加载状态 | `boolean` | `false` |
| loadingContent | 加载状态下展示的内容 | `ReactNode` | `默认提供了转圈加载中的加载效果` |
| tillNow | 是否展示“至今” | `boolean` | - | 5.32.0 |

关于 `DatePickerFilter` 的类型定义和使用，请参考 [DatePicker](/zh/components/picker#datepicker) 的文档。

### CSS 变量

同 `PickerView`。

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt