【微信小程序】From表单（88/100）

UI布局：

  switch
  

  radio
  
    
      选项一
    
    
      选项二
    
  

  checkbox
  
    
      选项一
    
    
      选项二
    
  

  slider
  

  input
  
    
  

  Submit
  Reset

数据模型& 控制

// pages/from/from.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    pickerHidden: true,
    chosen: ''
  },
  pickerConfirm(e) {
    this.setData({
      pickerHidden: true
    })
    this.setData({
      chosen: e.detail.value
    })
  },
  pickerCancel() {
    this.setData({
      pickerHidden: true
    })
  },
  pickerShow() {
    this.setData({
      pickerHidden: false
    })
  },

  formSubmit(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },

  formReset(e) {
    console.log('form发生了reset事件，携带数据为：', e.detail.value)
    this.setData({
      chosen: ''
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

结果如下图：

功能描述

表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。

当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

属性说明

属性 类型 默认值 必填 说明 最低版本 report-submit boolean false 否 是否返回 formId 用于发送模板消息 1.0.0

report-submit-timeout number 0 否 等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId 2.6.2

bindsubmit eventhandle 否 携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’} 1.0.0

bindreset eventhandle 否 表单重置时会触发 reset 事件 1.0.0