Picker

从底部弹起的滚动选择器

参考文档

类型

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

示例代码

  • React
  • Vue
  1. export default class PagePicker extends Component {
  2. state = {
  3. selector: ['美国', '中国', '巴西', '日本'],
  4. selectorChecked: '美国',
  5. timeSel: '12:01',
  6. dateSel: '2018-04-22'
  7. }
  8. onChange = e => {
  9. this.setState({
  10. selectorChecked: this.state.selector[e.detail.value]
  11. })
  12. }
  13. onTimeChange = e => {
  14. this.setState({
  15. timeSel: e.detail.value
  16. })
  17. }
  18. onDateChange = e => {
  19. this.setState({
  20. dateSel: e.detail.value
  21. })
  22. }
  23. render () {
  24. return (
  25. <View className='container'>
  26. <View className='page-body'>
  27. <View className='page-section'>
  28. <Text>地区选择器</Text>
  29. <View>
  30. <Picker mode='selector' range={this.state.selector} onChange={this.onChange}>
  31. <View className='picker'>
  32. 当前选择:{this.state.selectorChecked}
  33. </View>
  34. </Picker>
  35. </View>
  36. </View>
  37. <View className='page-section'>
  38. <Text>时间选择器</Text>
  39. <View>
  40. <Picker mode='time' onChange={this.onTimeChange}>
  41. <View className='picker'>
  42. 当前选择:{this.state.timeSel}
  43. </View>
  44. </Picker>
  45. </View>
  46. </View>
  47. <View className='page-section'>
  48. <Text>日期选择器</Text>
  49. <View>
  50. <Picker mode='date' onChange={this.onDateChange}>
  51. <View className='picker'>
  52. 当前选择:{this.state.dateSel}
  53. </View>
  54. </Picker>
  55. </View>
  56. </View>
  57. </View>
  58. </View>
  59. )
  60. }
  61. }
  1. <template>
  2. <view class="page-body">
  3. <view class="page-section">
  4. <text>地区选择器</text>
  5. <view>
  6. <picker mode="selector" :range="selector" @change="onChange">
  7. <view class="picker">
  8. 当前选择:{{selectorChecked}}
  9. </view>
  10. </picker>
  11. </view>
  12. </view>
  13. <view class="page-section">
  14. <text>时间选择器</text>
  15. <view>
  16. <picker mode="time" @change="onTimeChange">
  17. <view class="picker">
  18. 当前选择:{{timeSel}}
  19. </view>
  20. </picker>
  21. </view>
  22. </view>
  23. <view class="page-section">
  24. <text>日期选择器</text>
  25. <view>
  26. <picker mode="date" @change="onDateChange">
  27. <view class="picker">
  28. 当前选择:{{dateSel}}
  29. </view>
  30. </picker>
  31. </view>
  32. </view>
  33. </view>
  34. </template>
  35. <script>
  36. export default {
  37. data() {
  38. return {
  39. selector: ['美国', '中国', '巴西', '日本'],
  40. selectorChecked: '美国',
  41. timeSel: '12:01',
  42. dateSel: '2018-04-22'
  43. }
  44. },
  45. methods: {
  46. onChange: function(e) {
  47. this.selectorChecked = this.selector[e.detail.value]
  48. },
  49. onTimeChange: function(e) {
  50. this.timeSel = e.detail.value
  51. },
  52. onDateChange: function(e) {
  53. this.dateSel = e.detail.value
  54. }
  55. }
  56. }
  57. </script>

PickerStandardProps

选择器通用参数

参数类型默认值必填说明
mode“selector” | “multiSelector” | “time” | “date” | “region”“selector”选择器类型,默认是普通选择器
disabledbooleanfalse是否禁用
onCancelBaseEventOrigFunction<any>取消选择或点遮罩层收起 picker 时触发

API 支持度

API微信小程序H5React Native
PickerStandardProps.mode✔️✔️✔️
PickerStandardProps.disabled✔️✔️✔️
PickerStandardProps.onCancel✔️✔️✔️

mode

选择器类型

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

PickerSelectorProps

普通选择器:mode = selector

参数类型默认值必填说明
mode“selector”选择器类型
rangestring[] | number[] | Object[][]mode为 selector 或 multiSelector 时,range 有效
rangeKeystring当 range 是一个 Object Array 时,通过 rangeKey 来指定 Object 中 key 的值作为选择器显示内容
valuenumber0表示选择了 range 中的第几个(下标从 0 开始)
onChangeBaseEventOrigFunction<onChangeEventDetail>value 改变时触发 change 事件,event.detail = {value}

API 支持度

API微信小程序H5React Native
PickerSelectorProps.range✔️✔️✔️
PickerSelectorProps.rangeKey✔️✔️✔️
PickerSelectorProps.value✔️✔️✔️
PickerSelectorProps.onChange✔️✔️✔️

onChangeEventDetail

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

PickerMultiSelectorProps

多列选择器:mode = multiSelector

参数类型默认值必填说明
mode“multiSelector”选择器类型
rangestring[][] | number[][] | Object[][][]mode为 selector 或 multiSelector 时,range 有效
rangeKeystring当 range 是一个 Object Array 时,通过 rangeKey 来指定 Object 中 key 的值作为选择器显示内容
valuestring[] | number[] | Object[][]表示选择了 range 中的第几个(下标从 0 开始)
onChangeBaseEventOrigFunction<onChangeEventDetail>当 value 改变时触发 change 事件,event.detail = {value}
onColumnChangeBaseEventOrigFunction<onColumnChangeEvnetDetail>列改变时触发

API 支持度

API微信小程序H5React Native
PickerMultiSelectorProps.range✔️✔️✔️
PickerMultiSelectorProps.rangeKey✔️✔️✔️
PickerMultiSelectorProps.value✔️✔️✔️
PickerMultiSelectorProps.onChange✔️✔️✔️
PickerMultiSelectorProps.onColumnChange✔️✔️✔️

onChangeEventDetail

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

onColumnChangeEvnetDetail

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

PickerTimeProps

时间选择器:mode = time

参数类型必填说明
mode“time”选择器类型
valuestringvalue 的值表示选择了 range 中的第几个(下标从 0 开始)
startstring仅当 mode = time
endstring仅当 mode = time
onChangeBaseEventOrigFunction<onChangeEventDetail>value 改变时触发 change 事件,event.detail = {value}

API 支持度

API微信小程序H5React Native
PickerTimeProps.value✔️✔️✔️
PickerTimeProps.start✔️✔️✔️
PickerTimeProps.end✔️✔️✔️
PickerTimeProps.onChange✔️✔️✔️

onChangeEventDetail

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

PickerDateProps

日期选择器:mode = date

参数类型默认值必填说明
mode“date”选择器类型
valuestring0表示选中的日期,格式为”YYYY-MM-DD”
startstring仅当 mode = time
endstring仅当 mode = time
fields“year” | “month” | “day”“day”有效值 year, month, day,表示选择器的粒度
onChangeBaseEventOrigFunction<onChangeEventDetail>value 改变时触发 change 事件,event.detail = {value}

API 支持度

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

fields

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

onChangeEventDetail

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

PickerRegionProps

省市区选择器:mode = region

参数类型默认值必填说明
mode“region”选择器类型
valuestring[][]表示选中的省市区,默认选中每一列的第一个值
customItemstring可为每一列的顶部添加一个自定义的项
onChangeBaseEventOrigFunction<onChangeEventDetail>value 改变时触发 change 事件,event.detail = {value, code, postcode},其中字段 code 是统计用区划代码,postcode 是邮政编码

API 支持度

API微信小程序H5React Native
PickerRegionProps.value✔️✔️✔️
PickerRegionProps.customItem✔️✔️✔️
PickerRegionProps.onChange✔️✔️✔️

onChangeEventDetail

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

API 支持度

API微信小程序百度小程序支付宝小程序字节跳动小程序H5React Native
Picker✔️✔️✔️✔️✔️✔️