---
name: "picker-view-column"
mode: "component"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
title: "picker-view-column - Scroll picker sub-item"
---

## picker-view-column

> [VERSION] Base Library >= 2.10.0

### Description

Child item of the scroll picker; can only be placed in picker-view, each represents one column


### Examples

#### Basic usage

*index.tyml*

```xml
// index.tyml
<picker-view value="{{value}}" bind:change="onChange" class="picker">
  <picker-view-column>
    <view ty:for="{{years}}" ty:key="*this" class="picker-item">{{item}} Year</view>
  </picker-view-column>
  <picker-view-column>
    <view ty:for="{{months}}" ty:key="*this" class="picker-item">{{item}} Month</view>
  </picker-view-column>
</picker-view>
```

*index.tyss*

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

*index.js*

```javascript
Page({
  data: {
    years: [2024, 2025, 2026],
    months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    value: [0, 0],
  },
  onChange(e) {
    this.setData({ value: e.detail.value });
  },
});
```

#### Multi-column selection

*index.tyml*

```xml
// index.tyml
<picker-view value="{{value}}" bind:change="onChange" class="picker">
  <picker-view-column>
    <view ty:for="{{provinces}}" ty:key="*this" class="picker-item">{{item}}</view>
  </picker-view-column>
  <picker-view-column>
    <view ty:for="{{cities}}" ty:key="*this" class="picker-item">{{item}}</view>
  </picker-view-column>
</picker-view>
<text>Selected: {{provinces[value[0]]}} - {{cities[value[1]]}}</text>
```

*index.tyss*

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

*index.js*

```javascript
Page({
  data: {
    provinces: ['Zhejiang', 'Guangdong', 'Beijing'],
    cities: ['Hangzhou', 'Ningbo', 'Wenzhou'],
    value: [0, 0],
  },
  onChange(e) {
    this.setData({ value: e.detail.value });
  },
});
```