微信小程序（7）：常用的表单组件_cursor-spacing

一、button：按钮

button 的属性有很多，比如以下几个：

1、type：按钮的样式类型

<button type="primary">提交</button>
<button type="default">提交</button>
<button type="warn">提交</button>
1
2
3

2、size：按钮的大小

<button type="primary" size="mini">提交</button>
<button type="default" size="mini">提交</button>
<button type="warn" size="mini">提交</button>
1
2
3

3、plain：按钮是否镂空，背景色透明

<button type="primary" plain>提交</button>
<button type="default" plain>提交</button>
<button type="warn" plain>提交</button>
1
2
3

4、disabled：是否禁用

<button type="primary" disabled>提交</button>
1

5、loading：名称前是否带 loading 图标

<button loading>数据加载中...</button>
1

6、form-type：用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件

<form>
  <input></input>
  <input></input>
  <input></input>
  <button type="warn" form-type="reset">重置</button>
</form>
1
2
3
4
5
6

7、open-type：微信开放能力

<button open-type="getUserInfo">获取权限</button>
1

8、hover-class：指定按钮按下去的样式类。当 hover-class=“none” 时，没有点击态效果

二、checkbox：多选

<label>
  <checkbox/>小程序
</label>

<label>
  <checkbox></checkbox>小程序
</label>
1
2
3
4
5
6
7

三、radio：单选

<label>
  <radio checked></radio>选中
  <radio></radio>未选中
</label>
1
2
3
4

四、input：输入框

1、placeholder：输入框为空时占位符

placeholder-style：指定 placeholder 的样式

placeholder-class：指定 placeholder 的样式类

<input placeholder="请输入..."></input>
1

 input{
   border: 1px solid #ccc;
 }
1
2
3

<input placeholder="请输入..." placeholder-style="color:pink"></input>
1

2、type：input 的类型

例如为 number 时：

<input placeholder="请输入..." type="number"></input>
1

3、cursor-spacing：指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离

<input placeholder="请输入..." type="number" cursor-spacing="100"></input>
1

4、confirm-typeconfirm-type：设置键盘右下角按钮的文字，仅在type='text’时生效

五、switch：开关选择器

<switch type="checkbox" checked></switch>选中
<switch type="switch" checked></switch>
<switch type="switch" color="pink"></switch>
1
2
3