小程序教学五（表单组件）

本文介绍button、checkbox、form、input、textarea、picker、picker-view、radio、label

为什么一下介绍这么多呢，是因为他们的大部分和HTML里面的表单是一样
在.wxml里面写HTML标签
在.wxss里面写CSS样式
EventHandle 是触发事件类，需要写在.js里面

小程序所列出的属性，要写在.wxml标签里面，不能写在.wxss里面

button

和HTML中的button标签是一样的，都是一个可点击的按钮

使用 <button> 我是按钮 </button>

常用属性

属性名	类型	说明
type	String	按钮的样式类型
plain	Boolean	按钮是否镂空，背景色透明
disabled	Boolean	是否禁用
form-type	String	用于 <form/> 组件，点击分别会触发 <form/> 组件的 submit/reset 事件

type效果

type有效值：

primary
default
warn

form-type有效值：

submit 提交表单
reset 重置表单

input

和HTML中的input一样，只能单行输入数据

常用属性

属性名	类型	说明
value	String	输入框的初始内容
type	String	input 的类型
password	Boolean	是否是密码类型
placeholder	String	输入框为空时占位符
placeholder-style	String	指定 placeholder 的样式
placeholder-class	String	指定 placeholder 的样式类
disabled	Boolean	是否禁用
maxlength	Number	最大输入长度，设置为 -1 的时候不限制最大长度
cursor-spacing	Number	指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
focus	Boolean	获取焦点
confirm-type	String	设置键盘右下角按钮的文字
confirm-hold	Boolean	点击键盘右下角按钮时是否保持键盘不收起
bindinput	EventHandle	当键盘输入时，触发input事件，event.detail = {value, cursor}，处理函数可以直接 return 一个字符串，将替换输入框的内容。
bindfocus	EventHandle	输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度
bindblur	EventHandle	输入框失去焦点时触发，event.detail = {value: value}
bindconfirm	EventHandle	点击完成按钮时触发，event.detail = {value: value}

type有效值：

text 文本输入键盘
number 数字输入键盘
idcard 身份证输入键盘
digit 带小数点的数字键盘

confirm-type有效值：

send 右下角按钮为“发送”
search 右下角按钮为“搜索”
next 右下角按钮为“下一个”
go 右下角按钮为“前往”
done 右下角按钮为“完成”

textarea

和HTML中的textarea一样，可以多行输入内容

使用
<textarea />

textarea中的属性与input的属性一样
多了一个auto-height属性，Boolean值，
效果：是否自动增高，设置auto-height时，style.height不生效

form

和HTML中的form一样，将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交

常用属性

属性名	类型	说明
report-submit	Boolean	是否返回 formId 用于发送模板消息
bindsubmit	EventHandle	携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}
bindreset	EventHandle	表单重置时会触发 reset 事件

checkbox

和HTML中的checkbox标签是一样的，都是多选框，每个checkbox-group都可以放多个checkbox

使用
<checkbox-group>
<checkbox value="CHN" checked = "true" />中国
<checkbox value="USA" />美国
<checkbox value="ENG" />英国
</checkbox-group>

checkbox

常用属性

属性名	类型	说明
bindchange	EventHandle	<checkbox-group/>中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}
value	String	<checkbox/>标识，选中时触发<checkbox-group/>的 change 事件，并携带 <checkbox/> 的 value
disabled	Boolean	是否禁用
checked	Boolean	当前是否选中，可用来设置默认选中

radio

与HTML中的radio一样，单选框，同一个radio-group中只能有一个radio被选中

使用
<radio-group>
<radio value="CHN">中国</radio>
<radio value="USA">美国</radio>
<radio value="ENG">英国</radio>
</radio-group>

radio

常用属性

属性名	类型	说明
value	String	<radio/> 标识。当该<radio/> 选中时，<radio-group/> 的 change 事件会携带<radio/>的value
checked	Boolean	当前是否选中
disabled	Boolean	是否禁用
color	Color	radio的颜色，同css的color

label

一般与选择框一起使用达到文字点击时也触发checked

常用属性

属性名	类型	说明
for	String	绑定控件id

持续更新中...