---
name: "PickerView"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "PickerView - 嵌入页面的滚动选择器"
---

## PickerView

> [VERSION] @ray-js/ray >= 0.5.10

### 描述

嵌入页面的滚动选择器。其中只可放置 PickerViewColumn 组件，其它节点不会显示。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `value` | `number[]` | 否 | - | 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项 |
| `indicatorStyle` | `string \| any` | 否 | - | 设置选择器中间选中框的样式（对象或 CSS 声明字符串） |
| `maskStyle` | `string \| any` | 否 | - | 设置蒙层的样式（对象或 CSS 声明字符串） |
| `onChange` | `(event: PickerViewChangeEvent) => void` | 否 | - | 滚动选择时触发 |
| `onPickstart` | `(event: PickerViewPickstartEvent) => void` | 否 | - | 当滚动选择开始时触发 |
| `onPickend` | `(event: PickerViewPickendEvent) => void` | 否 | - | 当滚动选择结束时触发 |

### 引用对象

##### `interface` PickerViewChangeEvent

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `detail` | `PickerViewValueDetail` | 事件详情 |
| `value` | `number[]` | 各列当前选中项的索引数组（与 detail.value 一致） |

##### `interface` PickerViewPickstartEvent

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `detail` | `PickerViewValueDetail` | 事件详情 |
| `value` | `number[]` | 各列当前选中项的索引数组（与 detail.value 一致） |

##### `interface` PickerViewPickendEvent

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `detail` | `PickerViewValueDetail` | 事件详情 |
| `value` | `number[]` | 各列当前选中项的索引数组（与 detail.value 一致） |

##### `interface` PickerViewValueDetail

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `value` | `number[]` | 各列当前选中项的索引数组（下标从 0 开始） |

##### `interface` BaseEvent

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `type` | `string` | 事件类型 |
| `timeStamp` | `number` | 页面打开到触发事件所经过的毫秒数 |
| `target` | `Target` | 触发事件的源组件 |
| `currentTarget` | `Target` | 当前组件的一些属性值集合 |
| `mark` | `any` | 事件标记数据 |

##### `interface` Target

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `id` | `string` | 事件源组件的id |
| `dataset` | `Record<string, unknown>` | 事件源组件上的 `dataset` 自定义属性组成的集合 |


### 示例代码

#### 基础用法

```tsx
import React from 'react';
import { PickerView, PickerViewColumn, View, Text } from '@ray-js/ray';

export default function () {
  const [current, setCurrent] = React.useState([0]);
  const range = ['巴西', '中国', '日本', '美国'];

  return (
    <View style={{ padding: '20px' }}>
      <Text>当前选择: {range[current[0]]}</Text>
      <PickerView
        onChange={(e) => {
          console.log('选择改变:', e.detail.value);
          setCurrent(e.value);
        }}
        value={current}
        style={{ height: '200px', marginTop: '10px' }}
      >
        <PickerViewColumn>
          {range.map((item, index) => (
            <View key={index} style={{ textAlign: 'center', lineHeight: '36px' }}>
              {item}
            </View>
          ))}
        </PickerViewColumn>
      </PickerView>
    </View>
  );
}
```

#### 多列选择

```tsx
import React from 'react';
import { PickerView, PickerViewColumn, View, Text } from '@ray-js/ray';

export default function () {
  const [current, setCurrent] = React.useState([0, 0, 0]);

  const years = ['2020', '2021', '2022', '2023', '2024'];
  const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
  const days = Array.from({ length: 31 }, (_, i) => String(i + 1).padStart(2, '0'));

  return (
    <View style={{ padding: '20px' }}>
      <Text>
        当前日期: {years[current[0]]}-{months[current[1]]}-{days[current[2]]}
      </Text>
      <PickerView
        onChange={(e) => {
          console.log('日期改变:', e.detail.value);
          setCurrent(e.detail.value);
        }}
        value={current}
        style={{ height: '200px', marginTop: '10px' }}
        onPickstart={() => console.log('开始滚动')}
        onPickend={() => console.log('结束滚动')}
      >
        <PickerViewColumn>
          {years.map((item, index) => (
            <View key={index} style={{ textAlign: 'center', lineHeight: '36px' }}>{item}</View>
          ))}
        </PickerViewColumn>
        <PickerViewColumn>
          {months.map((item, index) => (
            <View key={index} style={{ textAlign: 'center', lineHeight: '36px' }}>{item}</View>
          ))}
        </PickerViewColumn>
        <PickerViewColumn>
          {days.map((item, index) => (
            <View key={index} style={{ textAlign: 'center', lineHeight: '36px' }}>{item}</View>
          ))}
        </PickerViewColumn>
      </PickerView>
    </View>
  );
}
```