简体中文
简体中文
# picker
从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。
# 兼容性
| Web | 微信小程序 | Android | iOS | HarmonyOS |
|---|---|---|---|---|
| 4.0 | 4.41 | x | x | 4.61 |
picker组件其实是基于picker-view组件封装了一个弹出形态。
Android/iOS平台可改用picker-view组件、或uni.showActionSheet。
或者使用开源组件uni-data-picker。这是也是基于picker-view组件封装的云端一体组件，如果需要选择城市，那么推荐使用该组件。
# 属性
| 名称 | 类型 | 默认值 | 兼容性 | 描述 | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| disabled | boolean | - | 是否禁用 | |||||||||||||||||||
| mode | string | - | 选择器类型 | |||||||||||||||||||
| ||||||||||||||||||||||
| range | array | - | mode为 selector 或 multiSelector 时，range 有效 | |||||||||||||||||||
| range-key | string | - | 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 | |||||||||||||||||||
| value | string | - | mode为select或multiSelector时：value 的值表示选择了 range 中的第几个（下标从 0 开始）；mode为time时：表示选中的时间，格式为"hh:mm"；mode为date时：表示选中的日期，格式为"YYYY-MM-DD"；mode为region时： 表示选中的省市区，默认选中每一列的第一个值。 | |||||||||||||||||||
| start | string | - | mode为time：表示有效时间范围的开始，字符串格式为"hh:mm"；mode为date：表示有效日期范围的开始，字符串格式为"YYYY-MM-DD" | |||||||||||||||||||
| end | string | - | mode为time：表示有效时间范围的结束，字符串格式为"hh:mm"；mode为date：表示有效日期范围的结束，字符串格式为"YYYY-MM-DD" | |||||||||||||||||||
| fields | string | - | 有效值 year,month,day，表示选择器的粒度 | |||||||||||||||||||
| ||||||||||||||||||||||
| custom-item | string | - | 可为每一列的顶部添加一个自定义的项 | |||||||||||||||||||
| @change | (event: UniPickerChangeEvent) => void | - | value 改变时触发 change 事件，event.detail = {value: value} | |||||||||||||||||||
| @columnchange | (event: UniPickerColumnChangeEvent) => void | - | 某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标 | |||||||||||||||||||
| @cancel | (event: UniPickerCancelEvent) => void | - | 取消选择时触发 | |||||||||||||||||||
| header-text | string | - | - | |||||||||||||||||||
| level | string | - | mode="region" 时有效，选择器层级 | |||||||||||||||||||
| ||||||||||||||||||||||
# 事件
# UniPickerChangeEvent
# UniPickerChangeEventDetail
# UniPickerChangeEventDetail 的属性值
| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |
|---|---|---|---|---|---|
| value | any | 是 | - | - | - |
# UniPickerColumnChangeEvent
# UniPickerColumnChangeEventDetail
# UniPickerColumnChangeEventDetail 的属性值
| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |
|---|---|---|---|---|---|
| value | number | 是 | - | - | - |
| column | number | 是 | - | - | - |
# 示例
Template
Script
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<page-head :title="title"></page-head>
<text class="uni-title uni-common-pl">禁用选择器</text>
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">当前选择</view>
<view class="uni-list-cell-db">
<picker class="picker-disabled--test" @change="bindPickerChange" disabled :value="index" :range="selectorArray" range-key="name">
<view class="uni-input picker-disabled--value">{{selectorArray[index].name}}</view>
</picker>
</view>
</view>
</view>
<text class="uni-picker-tips">注：值与普通选择器同步，但不可选择</text>
<text class="uni-title uni-common-pl">普通选择器</text>
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">当前选择</view>
<view class="uni-list-cell-db">
<picker class="picker-selector--test" @change="bindPickerChange" :value="index" :range="selectorArray" range-key="name">
<view class="uni-input picker-selector--value">{{selectorArray[index].name}}</view>
</picker>
</view>
</view>
</view>
<text class="uni-title uni-common-pl">多列选择器</text>
<view class="uni-list">
<view class="uni-list-cell">
<text class="uni-list-cell-left">当前选择</text>
<view class="uni-list-cell-db">
<picker class="picker-multi--test" mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
<view class="uni-input picker-multi--value">
{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
</view>
</picker>
</view>
</view>
</view>
<text class="uni-title uni-common-pl">时间选择器</text>
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">当前选择</view>
<view class="uni-list-cell-db">
<picker class="picker-time--test" mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
<view class="uni-input">{{time}}</view>
</picker>
</view>
</view>
</view>
<text class="uni-picker-tips">注：选择 09:01 ~ 21:01 之间的时间, 不在区间内不能选中</text>
<text class="uni-title uni-common-pl">日期选择器 fields = day</text>
<view class="uni-list">
<view class="uni-list-cell">
<text class="uni-list-cell-left">当前选择 </text>
<view class="uni-list-cell-db">
<picker class="picker-date-day--test" mode="date" :value="dayDate" :start="startDate" :end="endDate" @change="bindDayDateChange">
<view class="uni-input">{{dayDate}}</view>
</picker>
</view>
</view>
</view>
<text class="uni-picker-tips">注：选择当前时间 ±10 年之间的时间, 不在区间内不能选中</text>
<text class="uni-title uni-common-pl">日期选择器 fields = month</text>
<view class="uni-list">
<view class="uni-list-cell">
<text class="uni-list-cell-left">当前选择 </text>
<view class="uni-list-cell-db">
<picker class="picker-date-month--test" mode="date" fields="month" :value="monthDate" :start="startDate" :end="endDate" @change="bindMonthDateChange">
<view class="uni-input">{{monthDate}}</view>
</picker>
</view>
</view>
</view>
<text class="uni-picker-tips">注：选择当前时间 ±10 年之间的时间, 不在区间内不能选中，且日不可选</text>
<text class="uni-title uni-common-pl">日期选择器 fields = year</text>
<view class="uni-list">
<view class="uni-list-cell">
<text class="uni-list-cell-left">当前选择 </text>
<view class="uni-list-cell-db">
<picker class="picker-date-year--test" mode="date" fields="year" :value="yearDate" :start="startDate" :end="endDate" @change="bindYearDateChange">
<view class="uni-input">{{yearDate}}</view>
</picker>
</view>
</view>
</view>
<text class="uni-picker-tips">注：选择当前时间 ±10 年之间的时间, 不在区间内不能选中，且只能选择年</text>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<style>
.uni-title {
font-size: 14px;
}
.uni-picker-tips {
font-size: 12px;
color: #666;
margin-top: 5px;
margin-bottom: 15px;
padding: 0 15px;
}
</style>
