学做小程序之基础组件之表单组件理论下

目录

button

checkbox

form

input

label

picker

picker-view

radio

slider

switch

textarea

picker

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

普通选择器：mode=selector

range mode为selector活multiSelector时，range有效。

range-key 当range是一个Object Array时，通过range-key来指定Object中key的值作为选择器显示内容。

value value的值表示选择了range中的第几个（下标从0开始）

bindchange value改变时触发change事件，event.detail =

disabled 是否禁用

bindcancel 取消选择或点遮罩层收起picker时触发。

多列选择器：mode=multiSelector

range mode为selector或multiSelector时，range有效。二维数组，长度表示多少列，数组的每项表示每列的数据。

range-key 当range是一个二维Object Array时，通过range-key来指定Object中key的值作为选择显示器显示内容。

value value每一项的值表示选择了range对应项中的第几个（下标从0开始）

bindchange value改变时触发change事件，event.detail =

disabled 是否禁用

时间选择器：mode=time

value 表示选中的时间，格式为“hh:mm”

start 表示有效时间范围的开始，字符串格式为“hh:mm”

end 表示有效时间范围的结束，字符串格式为“hh:mm”

bindchange value改变时触发change事件，event.detail =

bindcancel 取消选择时触发

disabled 是否禁用

日期选择器：mode=date

value 表示选中的日期，格式为“YYYY-MM-DD”

start 表示有效日期范围的开始，字符串格式为“YYYY-MM-DD”

end 表示有效日期范围的结束，字符串格式为“YYYY-MM-DD”

fields 有效值year,month,day，表示选择器的粒度。

bindchange value改变时触发change事件，event.detail =

bindcancel 取消选择时触发

disabled 是否禁用

fields有效值

year 选择器粒度为年

month 选择器粒度为月份

day 选择器粒度为天

省市区选择器：mode=region

value 表示选中的省市区，默认选中每一列的第一个值

custom-item 可为每一列的顶部添加一个自定义的项

bindchange value改变时触发change事件，event.detail =

bindcancel 取消选择时触发

disabled 是否禁用

picker-view

嵌入页面的滚动选择器

value 数组中的数字依次表示picker-view内的picker-view-column选择的第几项（下标从0开始），数字大于picker-view-column可选项长度时，选择最后一项。

indicator-style 设置选择器中间选中框的样式

indicator-class 设置选择器中间选中框的类名

mask-style 设置蒙层的样式

mask-class 设置蒙层的类名

bindchange 当滚动选择，value改变时触发change事件，event.detail = ；value为数组，表示picker-view内的picker-view-column当前选择的是第几项（下标从0开始）。

picker-view中只可放置

组件，其他节点不会显示。

picker-view-column

仅可放置于

中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致。

radio-group

单项选择器，内部由多个组成。

bindchange 中的选中项发生变化时触发change事件，event.detail=

radio

单选项目

value 标识。当该选中时，的change事件会携带的value

checked 当前是否选中

disabled 是否禁用

color radio的颜色，同css的color

slider

滑动选择器

min 最小值

max 最大值

step 步长，取值必须大于0，并且可被(max-min)整除

disabled 是否禁用

value 当前取值

color 背景条的颜色(请使用backgroundColor)

activeColor 已选择的颜色

backgroundColor 背景条的颜色

block-size 滑块的大小，取值范围为12-28

block-color 滑块的颜色

show-value 是否显示当前value

bindchange 完成一次拖动后触发的事件，event.detail =

bindchanging 拖动过程中触发的事件，event.detail =

switch

开关选择器

checked 是否选中

type 样式，有效值：switch，checkbox

bindchange checked改变时触发change事件， event.detail =

color switch的颜色，同css的color

textarea

多行输入框

value 输入框的内容

placeholder 输入框为空时占位符

placeholder-style 指定placeholder的样式

placeholder-class 指定placeholder的样式类

disabled 是否禁用

maxlength 最大输入长度，设置为-1的时候不限制最大长度

auto-focus 自动聚焦，拉起键盘

focus 获取焦点

auto-height 是否自动增高，设置auto-height时，style.height不生效

fixed 如果textarea是在一个position:fixed的区域，需要显示指定属性fixed为true

cursor-spacing 指定光标与键盘的距离，单位px。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离

cursor 指定focus时的光标位置

show-confirm-bar 是否显示键盘上方带有“完成”按钮那一栏

selection-start 光标起始位置，自动聚集时有效，需与selection-end搭配使用

selection-end 光标结束位置，自动聚集时有效，需与selection-start搭配使用

adjust-position 键盘弹起时，是否自动上推页面。

bindfocus 输入框聚焦时触发，event.detail = , height为键盘高度。

bindblur 输入框失去焦点时触发，event.detail=

bindlinechange 输入框行数变化时调用，event.detail=

bindinput 当键盘输入时，触发input事件，event.detail=， bindinput处理函数的返回值并不会反映到textarea上

bindconfirm 点击完成时，触发confirm事件，event.detail =

谢谢！