picker 底部弹起的滚动选择器
收藏
我的收藏

基础库 1.0.0 开始支持本组件

从底部弹起的滚动选择器，现支持五种选择器，通过 mode 属性来设置，分别是 selector 普通选择器，multiSelector 多列选择器，time 时间选择器，date 日期选择器，region 省市区选择器，默认是 selector 普通选择器。

属性说明

属性名	类型	默认值	必填	说明	最低支持版本
mode	string	"selector"	否	选择器类型，详见 mode 的合法值。	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
bindcancel	EventHandle	无	否	取消选择收起 picker 时触发	1.0.0

除了上述通用的属性，对于不同的 mode，picker 拥有不同的属性，见下方：

mode 的合法值

值	说明	最低支持版本
selector	普通选择器	1.0.0
multiSelector	多列选择器	1.0.0
time	时间选择器	1.0.0
date	日期选择器	1.0.0
region	地区选择器	1.0.0

普通选择器 mode="selector"

属性名	类型	默认值	说明	最低支持版本
range	(string \| object)[]	[]	mode 为 selector 或 multiSelector 时，range 有效。	1.0.0
range-key	string	无	当 range 是一个 Array<object> 时，通过 range-key 来指定 object 中 key 的值作为选择器显示内容。	1.0.0
value	number	0	value 的值表示选择了 range 中的第几个（下标从 `0` 开始）。	1.0.0
disabled	boolean	false	是否禁用。	1.0.0
bindchange	EventHandle	无	确定选择时触发，详见下方说明。	1.0.0
bindcancel	EventHandle	无	取消选择收起 picker 时触发，详见下方。	1.0.0

多列选择器 mode="multiSelector"

range 最多支持 5 列数据，超出部分会直接忽略

属性名	类型	默认值	说明	最低支持版本
range	(string \| object)[][]	[]	mode 为 selector 或 multiSelector 时，range 有效。二维数组，一级数组表示有多少列，最多 5 列。	1.0.0
range-key	string	无	同普通选择器。	1.0.0
value	number[]	[]	格列选中下标值。	1.0.0
bindchange	EventHandle	无	确认选择时触发。	1.0.0
bindcolumnchange	EventHandle	无	某一列的值改变时触发 columnchange 事件，详见下方说明。	1.0.0
bindcancel	EventHandle	无	取消选择时触发。	1.0.0
disabled	EventHandle	false	是否禁用。	1.0.0

bindcolumnchange 说明

event.detail.column 表示改变了第几列（下标从 0 开始）。

event.detail.value value 的值表示变更值的下标 (下标从 0 开始)。

时间选择器 mode="time"

属性名	类型	默认值	说明	最低支持版本
value	string	无	表示选中的时间，格式为 "hh:mm"。	1.0.0
start	string	无	表示有效时间范围的开始，字符串格式为 "hh:mm"。	1.0.0
end	string	无	表示有效时间范围的结束，字符串格式为 "hh:mm"。	1.0.0
disabled	boolean	false	是否禁用。	1.0.0
bindchange	EventHandle	无	确认选择时触发。	1.0.0
bindcancel	EventHandle	无	取消选择时触发。	1.0.0

日期选择器 mode="date"

属性名	类型	默认值	说明	最低支持版本
value	string	无	表示选中的日期，格式为"YYYY-MM-DD"。	1.0.0
start	string	无	表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"。	1.0.0
end	string	无	表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"。	1.0.0
fields	"year" \| "month" \| "day"	"day"	表示选择器的粒度。	1.0.0
disabled	boolean	false	是否禁用。	1.0.0
bindchange	EventHandle	无	确认选择时触发。	1.0.0
bindcancel	EventHandle	无	取消选择时触发。	1.0.0

地区选择器 mode="region"

属性名	类型	默认值	说明	最低支持版本
value	string[]	无	默认选中每一列的第一个值，例如 `["北京", "北京市", "西城区"]`。	1.0.0
custom-item	string	无	可为每一列的顶部添加一个自定义的项。	1.0.0
disabled	boolean	false	是否禁用。	1.0.0
bindchange	EventHandle	无	确认选择时触发。	1.0.0
bindcancel	EventHandle	无	取消选择时触发。	1.0.0

扫码体验

代码示例

Bug & Tip

无

picker 底部弹起的滚动选择器收藏我的收藏