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.   }
  10.   onChange = e => {
  11.     this.setState({
  12.       selectorChecked: this.state.selector[e.detail.value]
  13.     })
  14.   }
  17.   onTimeChange = e => {
  18.     this.setState({
  19.       timeSel: e.detail.value
  20.     })
  21.   }
  22.   onDateChange = e => {
  23.     this.setState({
  24.       dateSel: e.detail.value
  25.     })
  26.   }
  29.   render () {
  30.     return (
  31.       <View className='container'>
  32.         <View className='page-body'>
  33.           <View className='page-section'>
  34.             <Text>地区选择器</Text>
  35.             <View>
  36.               <Picker mode='selector' range={this.state.selector} onChange={this.onChange}>
  37.                 <View className='picker'>
  38.                   当前选择：{this.state.selectorChecked}
  39.                 </View>
  40.               </Picker>
  41.             </View>
  42.           </View>
  43.           <View className='page-section'>
  44.             <Text>时间选择器</Text>
  45.             <View>
  46.               <Picker mode='time' onChange={this.onTimeChange}>
  47.                 <View className='picker'>
  48.                   当前选择：{this.state.timeSel}
  49.                 </View>
  50.               </Picker>
  51.             </View>
  52.           </View>
  53.           <View className='page-section'>
  54.             <Text>日期选择器</Text>
  55.             <View>
  56.               <Picker mode='date' onChange={this.onDateChange}>
  57.                 <View className='picker'>
  58.                   当前选择：{this.state.dateSel}
  59.                 </View>
  60.               </Picker>
  61.             </View>
  62.           </View>
  63.         </View>
  64.       </View>
  65.     )
  66.   }
  67. }
  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>
  37. <script>
  38.   export default {
  39.     data() {
  40.       return {
  41.         selector: ['美国', '中国', '巴西', '日本'],
  42.         selectorChecked: '美国',
  43.         timeSel: '12:01',
  44.         dateSel: '2018-04-22'
  45.       }
  46.     },
  47.     methods: {
  48.       onChange: function(e) {
  49.         this.selectorChecked = this.selector[e.detail.value]
  50.       },
  53.       onTimeChange: function(e) {
  54.         this.timeSel = e.detail.value
  55.       },
  58.       onDateChange: function(e) {
  59.         this.dateSel = e.detail.value
  60.       }
  61.     }
  62.   }
  63. </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”是选择器类型
valuestring是value 的值表示选择了 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✔️✔️✔️✔️✔️✔️