本文介绍button、checkbox、form、input、textarea、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有效值：
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>
常用属性
| 属性名 | 类型 | 说明 |
|---|---|---|
| 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>
常用属性
| 属性名 | 类型 | 说明 |
|---|---|---|
| value | String | <radio/> 标识。当该<radio/> 选中时，<radio-group/> 的 change 事件会携带<radio/>的value |
| checked | Boolean | 当前是否选中 |
| disabled | Boolean | 是否禁用 |
| color | Color | radio的颜色，同css的color |
label
一般与选择框一起使用达到文字点击时也触发checked
常用属性
| 属性名 | 类型 | 说明 |
|---|---|---|
| for | String | 绑定控件id |
持续更新中...
