---
name: "picker-view-column"
mode: "component"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
title: "picker-view-column - 滚动选择器子项"
---

## picker-view-column

> [VERSION] 基础库 >= 2.10.0

### 描述

滚动选择器子项，仅可放置在 picker-view 中，每个代表一列。


### 示例代码

#### 基础用法

*index.tyml*

```xml
<picker-view value="{{value}}" bind:change="onChange" class="picker">
  <picker-view-column>
    <view ty:for="{{years}}" ty:key="*this" class="picker-item">{{item}}年</view>
  </picker-view-column>
  <picker-view-column>
    <view ty:for="{{months}}" ty:key="*this" class="picker-item">{{item}}月</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 });
  },
});
```

#### 多列选择

*index.tyml*

```xml
<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>选中: {{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: ['浙江', '广东', '北京'],
    cities: ['杭州', '宁波', '温州'],
    value: [0, 0],
  },
  onChange(e) {
    this.setData({ value: e.detail.value });
  },
});
```