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