跳到主要内容
版本:4.x

Picker

从底部弹起的滚动选择器

支持情况:

参考文档

类型

ComponentType<PickerSelectorProps | PickerMultiSelectorProps | PickerTimeProps | PickerDateProps | PickerRegionProps>

示例代码

export default class PagePicker extends Component {
state = {
selector: ['美国', '中国', '巴西', '日本'],
selectorChecked: '美国',
timeSel: '12:01',
dateSel: '2018-04-22'
}

onChange = e => {
this.setState({
selectorChecked: this.state.selector[e.detail.value]
})
}

onTimeChange = e => {
this.setState({
timeSel: e.detail.value
})
}
onDateChange = e => {
this.setState({
dateSel: e.detail.value
})
}

render () {
return (
<View className='container'>
<View className='page-body'>
<View className='page-section'>
<Text>地区选择器</Text>
<View>
<Picker mode='selector' range={this.state.selector} onChange={this.onChange}>
<View className='picker'>
当前选择:{this.state.selectorChecked}
</View>
</Picker>
</View>
</View>
<View className='page-section'>
<Text>时间选择器</Text>
<View>
<Picker mode='time' onChange={this.onTimeChange}>
<View className='picker'>
当前选择:{this.state.timeSel}
</View>
</Picker>
</View>
</View>
<View className='page-section'>
<Text>日期选择器</Text>
<View>
<Picker mode='date' onChange={this.onDateChange}>
<View className='picker'>
当前选择:{this.state.dateSel}
</View>
</Picker>
</View>
</View>
</View>
</View>
)
}
}

PickerStandardProps

选择器通用参数

参数类型默认值必填说明
headerTextstring选择器的标题,微信小程序中仅安卓可用
modekeyof Mode"selector"选择器类型,默认是普通选择器
disabledbooleanfalse是否禁用
onCancelCommonEventFunction取消选择或点遮罩层收起 picker 时触发

API 支持度

API微信小程序H5React NativeHarmonyHarmony hybrid
PickerStandardProps.headerText✔️
PickerStandardProps.mode✔️✔️✔️✔️
PickerStandardProps.disabled✔️✔️✔️✔️
PickerStandardProps.onCancel✔️✔️✔️✔️

Mode

选择器类型

参数说明
selector普通选择器
multiSelector多列选择器
time时间选择器
date日期选择器
region省市区选择器

PickerText

参数类型必填
okTextstring
cancelTextstring

PickerSelectorProps

普通选择器:mode = selector

参数类型默认值必填说明
mode"selector"选择器类型
rangestring[] or number[] or Record<string, any>[][]mode为 selector 或 multiSelector 时,range 有效
rangeKeystring当 range 是一个 Object Array 时,通过 rangeKey 来指定 Object 中 key 的值作为选择器显示内容
valuenumber0表示选择了 range 中的第几个(下标从 0 开始)
defaultValuenumber设置 React 非受控状态下的初始取值
itemStyleStyleProp<TextStyle>{}mode为 selector 或 multiSelector 时 itemStyle 有效
indicatorStyleStyleProp<ViewStyle>{}mode为 selector 或 multiSelector 时 indicatorStyle 有效
onChangeCommonEventFunction<ChangeEventDetail>value 改变时触发 change 事件
textPropsPickerText用于替换组件内部文本

API 支持度

API微信小程序H5React NativeHarmonyHarmony hybrid
PickerSelectorProps.range✔️✔️✔️✔️
PickerSelectorProps.rangeKey✔️✔️✔️✔️
PickerSelectorProps.value✔️✔️✔️✔️
PickerSelectorProps.defaultValue✔️✔️✔️✔️
PickerSelectorProps.itemStyle✔️
PickerSelectorProps.indicatorStyle✔️
PickerSelectorProps.onChange✔️✔️✔️✔️
PickerSelectorProps.textProps✔️✔️

ChangeEventDetail

参数类型说明
valuestring or number表示变更值的下标

PickerMultiSelectorProps

多列选择器:mode = multiSelector

参数类型默认值必填说明
mode"multiSelector"选择器类型
rangestring[][] or number[][] or Record<string, any>[][][]mode为 selector 或 multiSelector 时,range 有效
rangeKeystring当 range 是一个 Object Array 时,通过 rangeKey 来指定 Object 中 key 的值作为选择器显示内容
valuestring[] or number[] or Record<string, any>[][]表示选择了 range 中的第几个(下标从 0 开始)
itemStyleStyleProp<TextStyle>{}mode为 selector 或 multiSelector 时 itemStyle 有效
indicatorStyleStyleProp<ViewStyle>{}mode为 selector 或 multiSelector 时 indicatorStyle 有效
onChangeCommonEventFunction<ChangeEventDetail>当 value 改变时触发 change 事件
onColumnChangeCommonEventFunction<ColumnChangeEventDetail>列改变时触发

API 支持度

API微信小程序H5React NativeHarmonyHarmony hybrid
PickerMultiSelectorProps.range✔️✔️✔️✔️
PickerMultiSelectorProps.rangeKey✔️✔️✔️✔️
PickerMultiSelectorProps.value✔️✔️✔️✔️
PickerMultiSelectorProps.itemStyle✔️
PickerMultiSelectorProps.indicatorStyle✔️
PickerMultiSelectorProps.onChange✔️✔️✔️✔️
PickerMultiSelectorProps.onColumnChange✔️✔️✔️✔️

ChangeEventDetail

参数类型说明
valuenumber[]表示变更值的下标

ColumnChangeEventDetail

参数类型说明
columnnumber表示改变了第几列(下标从0开始)
valuenumber表示变更值的下标

PickerTimeProps

时间选择器:mode = time

参数类型必填说明
mode"time"选择器类型
valuestringvalue 的值表示选择了 range 中的第几个(下标从 0 开始)
defaultValuestring设置 React 非受控状态下的初始取值
startstring仅当 mode 为 "time" 或 "date" 时有效,表示有效时间范围的开始,字符串格式为"hh:mm"
endstring仅当 mode 为 "time" 或 "date" 时有效,表示有效时间范围的结束,字符串格式为"hh:mm"
onChangeCommonEventFunction<ChangeEventDetail>value 改变时触发 change 事件

API 支持度

API微信小程序H5React NativeHarmonyHarmony hybrid
PickerTimeProps.value✔️✔️✔️✔️
PickerTimeProps.defaultValue✔️✔️✔️
PickerTimeProps.start✔️✔️✔️✔️
PickerTimeProps.end✔️✔️✔️✔️
PickerTimeProps.onChange✔️✔️✔️✔️

ChangeEventDetail

参数类型说明
valuestring表示选中的时间

PickerDateProps

日期选择器:mode = date

参数类型默认值必填说明
mode"date"选择器类型
valuestring0表示选中的日期,格式为"YYYY-MM-DD"
defaultValuestring设置 React 非受控状态下的初始取值
startstring仅当 mode 为 "time" 或 "date" 时有效,表示有效时间范围的开始,字符串格式为"YYYY-MM-DD"
endstring仅当 mode 为 "time" 或 "date" 时有效,表示有效时间范围的结束,字符串格式为"YYYY-MM-DD"
fieldskeyof Fields"day"有效值 year, month, day,表示选择器的粒度
onChangeCommonEventFunction<ChangeEventDetail>value 改变时触发 change 事件

API 支持度

API微信小程序H5React NativeHarmonyHarmony hybrid
PickerDateProps.value✔️✔️✔️✔️
PickerDateProps.defaultValue✔️✔️✔️
PickerDateProps.start✔️✔️✔️✔️
PickerDateProps.end✔️✔️✔️✔️
PickerDateProps.fields✔️✔️✔️✔️
PickerDateProps.onChange✔️✔️✔️✔️

Fields

参数说明
year选择器粒度为年
month选择器粒度为月份
day选择器粒度为天

ChangeEventDetail

参数类型说明
valuestring表示选中的日期

PickerRegionProps

省市区选择器:mode = region

参数类型默认值必填说明
mode"region"选择器类型
valuestring[][]表示选中的省市区,默认选中每一列的第一个值
defaultValuestring[]设置 React 非受控状态下的初始取值
customItemstring可为每一列的顶部添加一个自定义的项
levelkeyof Level"region"选择器层级
regionDataRegionData[]自定义省市区数据
onChangeCommonEventFunction<ChangeEventDetail>value 改变时触发 change 事件

API 支持度

API微信小程序H5React NativeHarmonyHarmony hybrid
PickerRegionProps.value✔️✔️✔️✔️
PickerRegionProps.defaultValue✔️✔️✔️
PickerRegionProps.customItem✔️✔️✔️✔️
PickerRegionProps.level✔️
PickerRegionProps.regionData✔️
PickerRegionProps.onChange✔️✔️✔️✔️

ChangeEventDetail

参数类型必填说明
valuestring[]表示选中的省市区
codestring[]统计用区划代码
postcodestring邮政编码

RegionData

参数类型必填
valuestring
codestring
postcodestring

Level

参数说明
province省级选择器
city市级选择器
region区级选择器
sub-district街道选择器