【微信小程序】组件（六）form

玩耍了好几天，终于今天又开始学习了。今天学习了form表单，先上一个效果图。

1.switch组件，很简单的一个小开关，具有如下属性：

属性名	类型	默认值	说明
checked	Boolean	false	是否选中
type	String	switch	样式，有效值：switch, checkbox
bindchange	EventHandle		checked 改变时触发 change 事件，event.detail={ value:checked}
color	Color		switch 的颜色，同 css 的 color

switch的type值默认为“switch”，如果更改type值为“checkbox”效果如下 ↓

2.slider组件，滑动选择器，属性如下 ↓

属性名	类型	默认值	说明
min	Number	0	最小值
max	Number	100	最大值
step	Number	1	步长，取值必须大于 0，并且可被(max - min)整除
disabled	Boolean	false	是否禁用
value	Number	0	当前取值
color	Color	#e9e9e9	背景条的颜色（请使用 backgroundColor）
selected-color	Color	#1aad19	已选择的颜色（请使用 activeColor）
activeColor	Color	#1aad19	已选择的颜色
backgroundColor	Color	#e9e9e9	背景条的颜色
show-value	Boolean	false	是否显示当前 value
bindchange	EventHandle		完成一次拖动后触发的事件，event.detail = {value: value}

3.input组件，输入框，属性有很多 ↓

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

type 有效值：

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

confirm-type 有效值：

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

①password为true时，文本隐藏显示

②focus聚焦，需要注意的是，最多只能有一个input的focus值为true

③placeholder为占位符的值，在本例中为“please input here”

4.radio组件，一组radio组件由一个radio-group包裹，每次最多只能选择一个radio

radio-group

单项选择器，内部由多个<radio/>组成。

属性名	类型	默认值	说明
bindchange	EventHandle		<radio-group/> 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}

radio

单选项目

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

5.checkbox组件，与radio组件类似，可多选，属性如下↓

checkbox-group

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

属性名	类型	默认值	说明
bindchange	EventHandle		<checkbox-group/>中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}

checkbox

多选项目。

属性名	类型	默认值	说明
value	String		<checkbox/>标识，选中时触发<checkbox-group/>的 change 事件，并携带 <checkbox/> 的 value
disabled	Boolean	false	是否禁用
checked	Boolean	false	当前是否选中，可用来设置默认选中
color	Color		checkbox的颜色，同css的color

6.form表单绑定了两个方法，submit提交和reset重置。

触发submit函数，得到控制台输出↓，

（每一个组件必须声明name属性，否则无法获得携带数据）

7.附上代码

①wxml代码段

<form bindsubmit="formSubmit" bindreset="formReset">

  <view class="section">
    <view class="section_title">地区选择器</view>
    <picker name="picker" bindchange="bindPickerChange" value="{{index}}" range="{{array}}" >
      <view class="picker">
        当前选择：{{array[index]}}
      </view>
    </picker>
  </view> 

  <view class="section section_gap">
    <view class="section__title">switch</view>
    <switch name="switch" type="checkbox"/>
  </view>

  <view class="section section_gap">
    <view class="section__title">slider</view>
    <slider name="slider" show-value ></slider>
  </view>

  <view class="section">
    <view class="section__title">input</view>
    <input name="input" password placeholder="please input here" />
  </view>

  <view class="section section_gap">
    <view class="section__title">radio</view>
    <radio-group name="radio-group">
      <view><label><radio value="radio1"/>radio1</label></view>
      <view><label><radio value="radio2"/>radio2</label></view>
    </radio-group>
    </view>

  <view class="section section_gap">
    <view class="section__title">checkbox</view>
    <checkbox-group name="checkbox">
      <label><checkbox value="checkbox1"/>checkbox1</label>
      <label><checkbox value="checkbox2"/>checkbox2</label>
    </checkbox-group>
    </view>

  <view class="btn-area">
    <button formType="submit">Submit</button>
    <button formType="reset">Reset</button>
  </view>

</form>

②js代码段

Page({
  data:{
    array:['中国','美国','日本'],
    index:0,
  },
  formSubmit: function (e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },
  formReset: function () {
    console.log('form发生了reset事件')
  },
  bindPickerChange:function(e){
    this.setData({
      index: e.detail.value
    })
  }
})

③wxss代码段

.section section_gap{
  margin-top: 20px;
  margin-bottom: 10px;
}
.section{
  margin-top: 20px;
}

细心的朋友们可能发现了地区选择器没有说明，我会在下一篇博客中详细记录。