Skip to main content
Version: 1.x

Picker

该 Picker 组件文档仅展示 H5 与 RN 支持属性与程度，其他相关属性请看各小程序官方文档​

微信小程序 Picker。

百度小程序 Picker。

支付宝小程序 Picker。

字节跳动小程序 Picker。

普通选择器：mode = selector​

属性及支持度

H5ReactNative属性名类型默认值说明
✔✔rangeArray / Object Array[]mode 为 selector 或 multiSelector 时，range 有效
✔✔rangeKeyString当 range 是一个 Object Array 时，通过 rangeKey 来指定 Object 中 key 的值作为选择器显示内容
✔✔valueNumber0value 的值表示选择了 range 中的第几个（下标从 0 开始）
✔✔onChangeEventHandlevalue 改变时触发 change 事件，event.detail = value: value
✔✔onCancelEventHandle取消选择或点遮罩层收起 picker 时触发
✔✔disabledBooleanfalse是否禁用
多列选择器：mode = multiSelector​

属性及支持度

H5ReactNative属性名类型默认值说明
✔✔range二维 Array / 二维 Object Array[]mode 为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[['a','b'], ['c','d']]
✔✔rangeKeyString当 range 是一个 二维 Object Array 时，通过 rangeKey 来指定 Object 中 key 的值作为选择器显示内容
✔✔valueArray[]value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）
✔✔onChangeEventHandlevalue 改变时触发 change 事件，event.detail = value: value
✔✔onColumnChangeEventHandle某一列的值改变时触发 columnchange 事件，event.detail = column: column, value: value，column 的值表示改变了第几列（下标从 0 开始），value 的值表示变更值的下标
✔✔onCancelEventHandle取消选择时触发
✔✔disabledBooleanfalse是否禁用
时间选择器：mode = time​

属性及支持度

H5ReactNative属性名类型默认值说明
✔✔valueString表示选中的时间，格式为'hh:mm'
✔✔startString表示有效时间范围的开始，字符串格式为'hh:mm'
✔✔endString表示有效时间范围的结束，字符串格式为'hh:mm'
✔✔onChangeEventHandlevalue 改变时触发 change 事件，event.detail = value: value
✔✔onCancelEventHandle取消选择或点遮罩层收起 picker 时触发
✔✔disabledBooleanfalse是否禁用
日期选择器：mode = date​

属性及支持度

H5ReactNative属性名类型默认值说明
✔✔valueStringnew Date()表示选中的日期，格式为'YYYY-MM-DD'
✔✔startString1970-01-01表示有效日期范围的开始，字符串格式为'YYYY-MM-DD'
✔✔endString2999-01-01表示有效日期范围的结束，字符串格式为'YYYY-MM-DD'
✔xfieldsStringday有效值 year,month,day，表示选择器的粒度
✔✔onChangeEventHandlevalue 改变时触发 change 事件，event.detail = value: value
✔✔onCancelEventHandle取消选择或点遮罩层收起 picker 时触发
✔✔disabledBooleanfalse是否禁用
示例：​
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Picker } from '@tarojs/components'

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>
    )
  }
}