---
name: "picker-view"
mode: "component"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
title: "picker-view - Scroll picker embedded in a page"
---

## picker-view

> [VERSION] Base Library >= 2.10.0

### Description

Embedded scroll picker; use with picker-view-column

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `checked` | `boolean` | No | `false` | Whether selected |
| `disabled` | `boolean` | No | `false` | Whether disabled |
| `color` | `string` | No | `""` | Color when selected, same as CSS color |
| `value` | `any[]` | No | `[]` | Each number in the array indicates which item is selected in the corresponding picker-view-column within the picker-view |
| `indicator-style` | `string` | No | `""` | Set the style of the middle selection indicator |
| `mask-style` | `string` | No | `""` | Set the overlay style |

#### Events

| Event | Type | Description |
| --- | --- | --- |
| `change` | `(event: PickerViewChangeEvent) => void` | Triggered while scrolling |
| `pickstart` | `(event: Object) => void` | Triggered when scroll selection starts |
| `pickend` | `(event: Object) => void` | Triggered when scroll selection ends |

**PickerViewChangeEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"change"` | Event type |
| `detail` | `PickerViewChangeDetail` | Event data |

**pickstart callback object**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"pickstart"` | Event type |

**pickend callback object**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"pickend"` | Event type |

### Examples

#### Basic usage

*index.tyml*

```xml
// index.tyml
<picker-view value=\"{{value}}\" class=\"picker\" bindchange=\"onChange\">
  <picker-view-column>
    <view ty:for=\"{{years}}\">{{item}} year</view>
  </picker-view-column>
</picker-view>
```

*index.tyss*

```css
.picker { height: 300rpx; }
```

*index.js*

```javascript
Page({
  data: {
    years: [2024, 2025, 2026],
    value: [0],
  },
  onChange(e) {
    this.setData({ value: e.detail.value });
  },
});
```

#### Multi-column selection

*index.tyml*

```xml
// index.tyml
<picker-view value=\"{{value}}\" class=\"picker\" bindchange=\"onChange\">
  <picker-view-column>
    <view ty:for=\"{{hours}}\">{{item}} hour</view>
  </picker-view-column>
  <picker-view-column>
    <view ty:for=\"{{minutes}}\">{{item}} minute</view>
  </picker-view-column>
</picker-view>
```

*index.tyss*

```css
.picker { height: 300rpx; }
```

*index.js*

```javascript
Page({
  data: {
    hours: Array.from({ length: 24 }, function (_, i) {
      return i;
    }),
    minutes: Array.from({ length: 60 }, function (_, i) {
      return i;
    }),
    value: [0, 0],
  },
  onChange(e) {
    this.setData({ value: e.detail.value });
  },
});
```

#### Custom indicator and overlay styles

*index.tyml*

```xml
<picker-view
  value="{{value}}"
  class="picker"
  indicator-style="height: 40px; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;"
  mask-style="background-image: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0.4)), linear-gradient(to top, rgba(255,255,255,0.9), rgba(255,255,255,0.4));"
  bind:change="onChange"
  bind:pickstart="onPickStart"
  bind:pickend="onPickEnd"
>
  <picker-view-column>
    <view ty:for="{{items}}" class="picker-item">{{item}}</view>
  </picker-view-column>
</picker-view>
```

*index.tyss*

```css
.picker { height: 300rpx; }
.picker-item { line-height: 40px; text-align: center; }
```

*index.js*

```javascript
Page({
  data: {
    items: ['Option A', 'Option B', 'Option C', 'Option D', 'Option E'],
    value: [0],
  },
  onChange(e) { this.setData({ value: e.detail.value }); },
  onPickStart() { console.log('Scrolling started'); },
  onPickEnd() { console.log('Scrolling ended'); },
});
```