小程序组件深入了解

前言:前面我们对组件进行基本了解,今天我们了解一下其他组件使用

一.表单组件 /form

表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。
当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

属性	类型	默认值	说明
report-submit	boolean	false	是否返回 formId 用于发送模板消息
report-submit-timeout	number	0	等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId
bindsubmit	eventhandle		携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}
bindreset	eventhandle		表单重置时会触发 reset 事件

使用内置 behaviors
对于 form 组件，目前可以自动识别下列内置 behaviors:
wx://form-field
wx://form-field-group
wx://form-field-button

1.wx://form-field:
使自定义组件有类似于表单控件的行为。 form 组件可以识别这些自定义组件，并在 submit 事件中返回组件的字段名及其对应字段值。这将为它添加以下两个属性。

属性名	类型	描述
name	String	在表单中的字段名
value	任意	在表单中的字段值

代码示例：

// custom-form-field.js
Component({
   
 behaviors: ['wx://form-field'],
 data: {
   
   value: ''
 },
 methods: {
   
   onChange: function (e) {
   
     this.setData({
   
       value: e.detail.value,
     })
   }
 }
})

2.wx://form-field-group:
使 form 组件可以识别到这个自定义组件内部的所有表单控件。
例如页面的结构如下：

<form bindsubmit="submit">
  <custom-comp></custom-comp>
  <button form-type="submit">submit</button>
<