Skip to main content
Version: 下个版本

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​

选择器通用参数

参数类型默认值必填说明
modekeyof Mode"selector"否选择器类型，默认是普通选择器
disabledbooleanfalse否是否禁用
onCancelCommonEventFunction否取消选择或点遮罩层收起 picker 时触发

API 支持度​

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

Mode​

选择器类型

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

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 开始）
onChangeCommonEventFunction<ChangeEventDetail>是value 改变时触发 change 事件，event.detail = {value}

API 支持度​

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

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 开始）
onChangeCommonEventFunction<ChangeEventDetail>是当 value 改变时触发 change 事件，event.detail = {value}
onColumnChangeCommonEventFunction<ColumnChangeEvnetDetail>否列改变时触发

API 支持度​

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

ChangeEventDetail​

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

ColumnChangeEvnetDetail​

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

PickerTimeProps​

时间选择器：mode = time

参数类型必填说明
mode"time"是选择器类型
valuestring是value 的值表示选择了 range 中的第几个（下标从 0 开始）
startstring否仅当 mode = timeordate 时有效，表示有效时间范围的开始，字符串格式为"hh:mm"
endstring否仅当 mode = timeordate 时有效，表示有效时间范围的结束，字符串格式为"hh:mm"
onChangeCommonEventFunction<ChangeEventDetail>是value 改变时触发 change 事件，event.detail = {value}

API 支持度​

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

ChangeEventDetail​

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

PickerDateProps​

日期选择器：mode = date

参数类型默认值必填说明
mode"date"是选择器类型
valuestring0是表示选中的日期，格式为"YYYY-MM-DD"
startstring否仅当 mode = timeordate 时有效，表示有效时间范围的开始，字符串格式为"hh:mm"
endstring否仅当 mode = timeordate 时有效，表示有效时间范围的结束，字符串格式为"hh:mm"
fieldskeyof Fields"day"否有效值 year, month, day，表示选择器的粒度
onChangeCommonEventFunction<ChangeEventDetail>是value 改变时触发 change 事件，event.detail = {value}

API 支持度​

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

Fields​

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

ChangeEventDetail​

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

PickerRegionProps​

省市区选择器：mode = region

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

API 支持度​

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

ChangeEventDetail​

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

RegionData​

参数类型必填
valuestring是
codestring是
postcodestring否