微信小程序开发文档——表单组件

最新推荐文章于 2025-05-20 11:11:30 发布
原创 最新推荐文章于 2025-05-20 11:11:30 发布 · 1.8k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文档详细介绍了微信小程序中的表单组件，包括button、checkbox、form、input、label、picker、picker-view、radio、slider、switch和textarea等。各组件的属性如type、mode、open-type等进行了说明，帮助开发者掌握表单组件的使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

表单组件

  • button 按钮
  • checkbox 多项选择器，内部由多个checkbox组成。
  • form 表单，将组件内的用户输入的<switch> <input> <checkbox> <slider> <radio> <picker> 提交。
  • input 输入框
  • label 绑定的控件
  • picker 从底部弹起的滚动选择器，通过mode来区分。现支持普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。
  • picker-view 嵌入页面的滚动选择器
  • radio 单项选择器，内部由多个<radio>组成。
  • slider 滑动选择器
  • switch 开关选择器
  • textarea 多行输入框

公用属性

1. button

属性名类型默认值说明生效时机最低版本
sizeStringdefault按钮的大小  
typeStringdefault按钮的样式类型  
plainBooleanfalse按钮是否镂空，背景色透明  
disabledBooleanfalse是否禁用  
loadingBooleanfalse名称前是否带 loading 图标  
form-typeString 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件  
open-typeString 微信开放能力 1.1.0
hover-classStringbutton-hover指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果  
hover-stop-propagationBooleanfalse指定是否阻止本节点的祖先节点出现点击态 1.5.0
hover-start-timeNumber20按住后多久出现点击态，单位毫秒  
hover-stay-timeNumber70手指松开后点击态保留时间，单位毫秒  
langStringen指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。open-type="getUserInfo"1.3.0
bindgetuserinfoHandler 用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致open-type="getUserInfo"1.3.0
session-fromString 会话来源open-type="contact"1.4.0
send-message-titleString当前标题会话内消息卡片标题open-type="contact"1.5.0
send-message-pathString当前分享路径会话内消息卡片点击跳转小程序路径open-type="contact"1.5.0
send-message-imgString截图会话内消息卡片图片open-type="contact"1.5.0
show-message-cardBooleanfalse是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息open-type="contact"1.5.0
bindcontactHandler 客服消息回调open-type="contact"1.5.0
bindgetphonenumberHandler 获取用户手机号回调open-type="getPhoneNumber"1.2.0
app-parameterString 打开 APP 时，向 APP 传递的参数open-type="launchApp"1.9.5
binderrorHandler 当使用开放能力时，发生错误的回调open-type="launchApp"1.9.5
bindlaunchappHandler 打开 APP 成功的回调open-type="launchApp"2.4.4
bindopensettingHandler 在打开授权设置页后回调open-type="openSetting"2.0.7
aria-labelString 无障碍访问，（属性）元素的额外描述 2.5.0

type 有效值：

值说明
primary绿色
default白色
warn红色

form-type 有效值：

值说明
submit提交表单
reset重置表单

open-type 有效值：

值说明最低版本
contact打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明1.1.0
share触发用户转发，使用前建议先阅读使用指引1.2.0
getUserInfo获取用户信息，可以从bindgetuserinfo回调中获取到用户信息1.3.0
getPhoneNumber获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明1.2.0
launchApp打开APP，可以通过app-parameter属性设定向APP传的参数具体说明1.9.5
openSetting打开授权设置页2.0.7
feedback打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容2.1.0
/** wxss **/
/** 修改button默认的点击态样式类**/
.button-hover {
  background-color: red;
}
/** 添加自定义button点击态样式类**/
.other-button-hover {
  background-color: blue;
}

<button
  type="default"
  size="{{defaultSize}}"
  loading="{{loading}}"
  plain="{{plain}}"
  disabled="{{disabled}}"
  bindtap="default"
  hover-class="other-button-hover"
>
  default
</button>
<button
  type="primary"
  size="{{primarySize}}"
  loading="{{loading}}"
  plain="{{plain}}"
  disabled="{{disabled}}"
  bindtap="primary"
>
  primary
</button>
<button
  type="warn"
  size="{{warnSize}}"
  loading="{{loading}}"
  plain="{{plain}}"
  disabled="{{disabled}}"
  bindtap="warn"
>
  warn
</button>
<button bindtap="setDisabled">点击设置以上按钮disabled属性</button>
<button bindtap="setPlain">点击设置以上按钮plain属性</button>
<button bindtap="setLoading">点击设置以上按钮loading属性</button>
<button open-type="contact">进入客服会话</button>
<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">
  获取用户信息
</button>
<button open-type="openSetting">打开授权设置页</button>

const types = ['default', 'primary', 'warn']
const pageObject = {
  data: {
    defaultSize: 'default',
    primarySize: 'default',
    warnSize: 'default',
    disabled: false,
    plain: false,
    loading: false
  },
  setDisabled(e) {
    this.setData({
      disabled: !this.data.disabled
    })
  },
  setPlain(e) {
    this.setData({
      plain: !this.data.plain
    })
  },
  setLoading(e) {
    this.setData({
      loading: !this.data.loading
    })
  },
  onGotUserInfo(e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.userInfo)
    console.log(e.detail.rawData)
  },
}

for (let i = 0; i < types.length; ++i) {
  (function (type) {
    pageObject[type] = function (e) {
      const key = type + 'Size'
      const changedData = {}
      changedData[key] =
        this.data[key] === 'default' ? 'mini' : 'default'
      this.setData(changedData)
    }
  }(types[i]))
}

Page(pageObject)

 

2. checkbox

checkbox-group

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

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

checkbox

多选项目。

属性名类型默认值说明最低版本
valueString <checkbox>标识，选中时触发<checkbox-group>的 change 事件，并携带 <checkbox> 的 value 
disabledBooleanfalse是否禁用 
checkedBooleanfalse当前是否选中，可用来设置默认选中 
colorColor checkbox的颜色，同css的color 
aria-labelString 无障碍访问，（属性）元素的额外描述2.5.0

3. form

属性名类型说明最低版本
report-submitBoolean是否返回 formId 用于发送模板消息 
bindsubmitEventHandle携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''} 
bindresetEventHandle表单重置时会触发 reset 事件
<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="section section_gap">
    <view class="section__title">switch</view>
    <switch name="switch" />
  </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" placeholder="please input here" />
  </view>
  <view class="section section_gap">
    <view class="section__title">radio</view>
    <radio-group name="radio-group">
      <label>
        <radio value="radio1" />
        radio1
      </label>
      <label>
        <radio value="radio2" />
        radio2
      </label>
    </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 form-type="submit">Submit</button>
    <button form-type="reset">Reset</button>
  </view>
</form>

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

 

4. input

属性名类型默认值说明最低版本
valueString 输入框的初始内容 
typeString"text"input 的类型 
passwordBooleanfalse是否是密码类型 
placeholderString 输入框为空时占位符 
placeholder-styleString 指定 placeholder 的样式 
placeholder-classString"input-placeholder"指定 placeholder 的样式类 
disabledBooleanfalse是否禁用 
maxlengthNumber140最大输入长度，设置为 -1 的时候不限制最大长度 
cursor-spacingNumber / String0指定光标与键盘的距离，单位px（2.4.0起支持rpx）。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 
auto-focusBooleanfalse(即将废弃，请直接使用 focus )自动聚焦，拉起键盘 
focusBooleanfalse获取焦点 
confirm-typeString"done"设置键盘右下角按钮的文字，仅在type='text'时生效1.1.0
confirm-holdBooleanfalse点击键盘右下角按钮时是否保持键盘不收起1.1.0
cursorNumber 指定focus时的光标位置1.5.0
selection-startNumber-1光标起始位置，自动聚集时有效，需与selection-end搭配使用1.9.0
selection-endNumber-1光标结束位置，自动聚集时有效，需与selection-start搭配使用1.9.0
adjust-positionBooleantrue键盘弹起时，是否自动上推页面1.9.90
bindinputEventHandle 键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。 
bindfocusEventHandle 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持 
bindblurEventHandle 输入框失去焦点时触发，event.detail = {value: value} 
bindconfirmEventHandle 点击完成按钮时触发，event.detail = {value: value} 
aria-labelString 无障碍访问，（属性）元素的额外描述2.5.0

type 有效值：

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

confirm-type 有效值：

值说明
send右下角按钮为“发送”
search右下角按钮为“搜索”
next右下角按钮为“下一个”
go右下角按钮为“前往”
done右下角按钮为“完成”
<!--input.wxml-->
<view class="section">
  <input placeholder="这是一个可以自动聚焦的input" auto-focus />
</view>
<view class="section">
  <input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
  <view class="btn-area">
    <button bindtap="bindButtonTap">使得输入框获取焦点</button>
  </view>
</view>
<view class="section">
  <input maxlength="10" placeholder="最大输入长度10" />
</view>
<view class="section">
  <view class="section__title">你输入的是：{{inputValue}}</view>
  <input bindinput="bindKeyInput" placeholder="输入同步到view中" />
</view>
<view class="section">
  <input bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
</view>
<view class="section">
  <input password type="number" />
</view>
<view class="section">
  <input password type="text" />
</view>
<view class="section">
  <input type="digit" placeholder="带小数点的数字键盘" />
</view>
<view class="section">
  <input type="idcard" placeholder="身份证输入键盘" />
</view>
<view class="section">
  <input placeholder-style="color:red" placeholder="占位符字体是红色的" />
</view>

// input.js
Page({
  data: {
    focus: false,
    inputValue: ''
  },
  bindButtonTap() {
    this.setData({
      focus: true
    })
  },
  bindKeyInput(e) {
    this.setData({
      inputValue: e.detail.value
    })
  },
  bindReplaceInput(e) {
    const value = e.detail.value
    let pos = e.detail.cursor
    if (pos != -1) {
      // 光标在中间
      const left = e.detail.value.slice(0, pos)
      // 计算光标的位置
      pos = left.replace(/11/g, '2').length
    }

    // 直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置
    return {
      value: value.replace(/11/g, '2'),
      cursor: pos
    }

    // 或者直接返回字符串,光标在最后边
    // return value.replace(/11/g,'2'),
  }
})

 

 

 5. label

属性名类型说明
forString绑定控件的 id

6. picker

属性名类型默认值说明最低版本
rangeArray / Object Array[]mode为 selector 或 multiSelector 时，range 有效 
range-keyString 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 
valueNumber0value 的值表示选择了 range 中的第几个（下标从 0 开始） 
bindchangeEventHandle value 改变时触发 change 事件，event.detail = {value: value} 
disabledBooleanfalse是否禁用 
bindcancelEventHandle 取消选择或点遮罩层收起 picker 时触发1.9.90

多列选择器：mode = multiSelector（最低版本：1.4.0）

属性名类型默认值说明最低版本
range二维Array / 二维Object Array[]mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[["a","b"], ["c","d"]] 
range-keyString 当 range 是一个 二维Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 
valueArray[]value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始） 
bindchangeEventHandle value 改变时触发 change 事件，event.detail = {value: value} 
bindcolumnchangeEventHandle 某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标 
bindcancelEventHandle 取消选择时触发1.9.90
disabledBooleanfalse是否禁用 

时间选择器：mode = time

属性名类型默认值说明最低版本
valueString 表示选中的时间，格式为"hh:mm" 
startString 表示有效时间范围的开始，字符串格式为"hh:mm" 
endString 表示有效时间范围的结束，字符串格式为"hh:mm" 
bindchangeEventHandle value 改变时触发 change 事件，event.detail = {value: value} 
bindcancelEventHandle 取消选择时触发1.9.90
disabledBooleanfalse是否禁用 

日期选择器：mode = date

属性名类型默认值说明最低版本
valueString0表示选中的日期，格式为"YYYY-MM-DD" 
startString 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD" 
endString 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD" 
fieldsStringday有效值 year,month,day，表示选择器的粒度 
bindchangeEventHandle value 改变时触发 change 事件，event.detail = {value: value} 
bindcancelEventHandle 取消选择时触发1.9.90
disabledBooleanfalse是否禁用 

fields 有效值：

值说明
year选择器粒度为年
month选择器粒度为月份
day选择器粒度为天

省市区选择器：mode = region（最低版本：1.4.0）

属性名类型默认值说明最低版本
valueArray[]表示选中的省市区，默认选中每一列的第一个值 
custom-itemString 可为每一列的顶部添加一个自定义的项1.5.0
bindchangeEventHandle value 改变时触发 change 事件，event.detail = {value: value, code: code, postcode: postcode}，其中字段code是统计用区划代码，postcode是邮政编码 
bindcancelEventHandle 取消选择时触发1.9.90
disabledBooleanfalse是否禁用

 

<view class="section">
  <view class="section__title">普通选择器</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      当前选择：{{array[index]}}
    </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">多列选择器</view>
  <picker
    mode="multiSelector"
    bindchange="bindMultiPickerChange"
    bindcolumnchange="bindMultiPickerColumnChange"
    value="{{multiIndex}}"
    range="{{multiArray}}"
  >
    <view class="picker">
      当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
    </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">时间选择器</view>
  <picker
    mode="time"
    value="{{time}}"
    start="09:01"
    end="21:01"
    bindchange="bindTimeChange"
  >
    <view class="picker">
      当前选择: {{time}}
    </view>
  </picker>
</view>

<view class="section">
  <view class="section__title">日期选择器</view>
  <picker
    mode="date"
    value="{{date}}"
    start="2015-09-01"
    end="2017-09-01"
    bindchange="bindDateChange"
  >
    <view class="picker">
      当前选择: {{date}}
    </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">省市区选择器</view>
  <picker
    mode="region"
    bindchange="bindRegionChange"
    value="{{region}}"
    custom-item="{{customItem}}"
  >
    <view class="picker">
      当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
    </view>
  </picker>
</view>

Page({
  data: {
    array: ['美国', '中国', '巴西', '日本'],
    objectArray: [
      {
        id: 0,
        name: '美国'
      },
      {
        id: 1,
        name: '中国'
      },
      {
        id: 2,
        name: '巴西'
      },
      {
        id: 3,
        name: '日本'
      }
    ],
    index: 0,
    multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
    objectMultiArray: [
      [
        {
          id: 0,
          name: '无脊柱动物'
        },
        {
          id: 1,
          name: '脊柱动物'
        }
      ], [
        {
          id: 0,
          name: '扁性动物'
        },
        {
          id: 1,
          name: '线形动物'
        },
        {
          id: 2,
          name: '环节动物'
        },
        {
          id: 3,
          name: '软体动物'
        },
        {
          id: 3,
          name: '节肢动物'
        }
      ], [
        {
          id: 0,
          name: '猪肉绦虫'
        },
        {
          id: 1,
          name: '吸血虫'
        }
      ]
    ],
    multiIndex: [0, 0, 0],
    date: '2016-09-01',
    time: '12:01',
    region: ['广东省', '广州市', '海珠区'],
    customItem: '全部'
  },
  bindPickerChange(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  bindMultiPickerChange(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      multiIndex: e.detail.value
    })
  },
  bindMultiPickerColumnChange(e) {
    console.log('修改的列为', e.detail.column, '，值为', e.detail.value)
    const data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    }
    data.multiIndex[e.detail.column] = e.detail.value
    switch (e.detail.column) {
      case 0:
        switch (data.multiIndex[0]) {
          case 0:
            data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物']
            data.multiArray[2] = ['猪肉绦虫', '吸血虫']
            break
          case 1:
            data.multiArray[1] = ['鱼', '两栖动物', '爬行动物']
            data.multiArray[2] = ['鲫鱼', '带鱼']
            break
        }
        data.multiIndex[1] = 0
        data.multiIndex[2] = 0
        break
      case 1:
        switch (data.multiIndex[0]) {
          case 0:
            switch (data.multiIndex[1]) {
              case 0:
                data.multiArray[2] = ['猪肉绦虫', '吸血虫']
                break
              case 1:
                data.multiArray[2] = ['蛔虫']
                break
              case 2:
                data.multiArray[2] = ['蚂蚁', '蚂蟥']
                break
              case 3:
                data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓']
                break
              case 4:
                data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物']
                break
            }
            break
          case 1:
            switch (data.multiIndex[1]) {
              case 0:
                data.multiArray[2] = ['鲫鱼', '带鱼']
                break
              case 1:
                data.multiArray[2] = ['青蛙', '娃娃鱼']
                break
              case 2:
                data.multiArray[2] = ['蜥蜴', '龟', '壁虎']
                break
            }
            break
        }
        data.multiIndex[2] = 0
        break
    }
    console.log(data.multiIndex)
    this.setData(data)
  },
  bindDateChange(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },
  bindTimeChange(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      time: e.detail.value
    })
  },
  bindRegionChange(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  }
})

 

7. picker-view

 

属性名类型说明最低版本
valueNumberArray数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。 
indicator-styleString设置选择器中间选中框的样式 
indicator-classString设置选择器中间选中框的类名1.1.0
mask-styleString设置蒙层的样式1.5.0
mask-classString设置蒙层的类名1.5.0
bindchangeEventHandle当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始） 
bindpickstartEventHandle当滚动选择开始时候触发事件2.3.1
bindpickendEventHandle当滚动选择结束时候触发事件2.3.1
aria-labelString无障碍访问，（属性）元素的额外描述2.5.0
<view>
  <view>{{year}}年{{month}}月{{day}}日</view>
  <picker-view
    indicator-style="height: 50px;"
    style="width: 100%; height: 300px;"
    value="{{value}}"
    bindchange="bindChange"
  >
    <picker-view-column>
      <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
    </picker-view-column>
  </picker-view>
</view>

const date = new Date()
const years = []
const months = []
const days = []

for (let i = 1990; i <= date.getFullYear(); i++) {
  years.push(i)
}

for (let i = 1; i <= 12; i++) {
  months.push(i)
}

for (let i = 1; i <= 31; i++) {
  days.push(i)
}

Page({
  data: {
    years,
    year: date.getFullYear(),
    months,
    month: 2,
    days,
    day: 2,
    value: [9999, 1, 1],
  },
  bindChange(e) {
    const val = e.detail.value
    this.setData({
      year: this.data.years[val[0]],
      month: this.data.months[val[1]],
      day: this.data.days[val[2]]
    })
  }
})

 

8.radio

 

属性名类型默认值说明最低版本
valueString <radio> 标识。当该<radio> 选中时，<radio-group> 的 change 事件会携带<radio>的value 
checkedBooleanfalse当前是否选中 
disabledBooleanfalse是否禁用 
colorColor radio的颜色，同css的color 
aria-labelString 无障碍访问，（属性）元素的额外描述 2.5.0 
<radio-group class="radio-group" bindchange="radioChange">
  <label class="radio" wx:for="{{items}}">
    <radio value="{{item.name}}" checked="{{item.checked}}" />
    {{item.value}}
  </label>
</radio-group>

Page({
  data: {
    items: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英国'},
      {name: 'TUR', value: '法国'},
    ]
  },
  radioChange(e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value)
  }
})

 

9. slider

 

属性名类型默认值说明最低版本
minNumber0最小值 
maxNumber100最大值 
stepNumber1步长，取值必须大于 0，并且可被(max - min)整除 
disabledBooleanfalse是否禁用 
valueNumber0当前取值 
colorColor#e9e9e9背景条的颜色（请使用 backgroundColor） 
selected-colorColor#1aad19已选择的颜色（请使用 activeColor） 
activeColorColor#1aad19已选择的颜色 
backgroundColorColor#e9e9e9背景条的颜色 
block-sizeNumber28滑块的大小，取值范围为 12 - 281.9.0
block-colorColor#ffffff滑块的颜色1.9.0
show-valueBooleanfalse是否显示当前 value 
bindchangeEventHandle 完成一次拖动后触发的事件，event.detail = {value: value} 
bindchangingEventHandle 拖动过程中触发的事件，event.detail = {value: value}1.7.0
aria-labelString 无障碍访问，（属性）元素的额外描述2.5.0
<view class="section section_gap">
  <text class="section__title">设置step</text>
  <view class="body-view">
    <slider bindchange="slider2change" step="5" />
  </view>
</view>

<view class="section section_gap">
  <text class="section__title">显示当前value</text>
  <view class="body-view">
    <slider bindchange="slider3change" show-value />
  </view>
</view>

<view class="section section_gap">
  <text class="section__title">设置最小/最大值</text>
  <view class="body-view">
    <slider bindchange="slider4change" min="50" max="200" show-value />
  </view>
</view>

const pageData = {}
for (let i = 1; i < 5; i++) {
  (function (index) {
    pageData['slider' + index + 'change'] = function (e) {
      console.log('slider' + 'index' + '发生 change 事件，携带值为', e.detail.value)
    }
  }(i))
}
Page(pageData)

 

10. switch

 

属性名类型默认值说明最低版本
checkedBooleanfalse是否选中 
disabledBooleanfalse是否禁用 
typeStringswitch样式，有效值：switch, checkbox 
bindchangeEventHandle checked 改变时触发 change 事件，event.detail={ value:checked} 
colorColor switch 的颜色，同 css 的 color 
aria-labelString 无障碍访问，（属性）元素的额外描述2.5.0
<view class="body-view">
  <switch checked bindchange="switch1Change" />
  <switch bindchange="switch2Change" />
</view>

Page({
  switch1Change(e) {
    console.log('switch1 发生 change 事件，携带值为', e.detail.value)
  },
  switch2Change(e) {
    console.log('switch2 发生 change 事件，携带值为', e.detail.value)
  }
})

 

11. textarea

 

属性名类型默认值说明最低版本
valueString 输入框的内容 
placeholderString 输入框为空时占位符 
placeholder-styleString 指定 placeholder 的样式，目前仅支持color,font-size和font-weight 
placeholder-classStringtextarea-placeholder指定 placeholder 的样式类 
disabledBooleanfalse是否禁用 
maxlengthNumber140最大输入长度，设置为 -1 的时候不限制最大长度 
auto-focusBooleanfalse自动聚焦，拉起键盘。 
focusBooleanfalse获取焦点 
auto-heightBooleanfalse是否自动增高，设置auto-height时，style.height不生效 
fixedBooleanfalse如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true 
cursor-spacingNumber / String0指定光标与键盘的距离，单位px（2.4.0起支持rpx）。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 
cursorNumber 指定focus时的光标位置1.5.0
show-confirm-barBooleantrue是否显示键盘上方带有”完成“按钮那一栏1.6.0
selection-startNumber-1光标起始位置，自动聚集时有效，需与selection-end搭配使用1.9.0
selection-endNumber-1光标结束位置，自动聚集时有效，需与selection-start搭配使用1.9.0
adjust-positionBooleantrue键盘弹起时，是否自动上推页面1.9.90
bindfocusEventHandle 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持 
bindblurEventHandle 输入框失去焦点时触发，event.detail = {value, cursor} 
bindlinechangeEventHandle 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0} 
bindinputEventHandle 当键盘输入时，触发 input 事件，event.detail = {value, cursor, keyCode}，keyCode 为键值，目前工具还不支持返回keyCode参数。bindinput 处理函数的返回值并不会反映到 textarea 上 
bindconfirmEventHandle 点击完成时， 触发 confirm 事件，event.detail = {value: value} 
aria-labelString 无障碍访问，（属性）元素的额外描述2.5.0
<!--textarea.wxml-->
<view class="section">
  <textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高" />
</view>
<view class="section">
  <textarea
    placeholder="placeholder颜色是红色的"
    placeholder-style="color:red;"
  />
</view>
<view class="section">
  <textarea placeholder="这是一个可以自动聚焦的textarea" auto-focus />
</view>
<view class="section">
  <textarea placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
  <view class="btn-area">
    <button bindtap="bindButtonTap">使得输入框获取焦点</button>
  </view>
</view>
<view class="section">
  <form bindsubmit="bindFormSubmit">
    <textarea placeholder="form 中的 textarea" name="textarea" />
    <button form-type="submit">提交</button>
  </form>
</view>

// textarea.js
Page({
  data: {
    height: 20,
    focus: false
  },
  bindButtonTap() {
    this.setData({
      focus: true
    })
  },
  bindTextAreaBlur(e) {
    console.log(e.detail.value)
  },
  bindFormSubmit(e) {
    console.log(e.detail.value.textarea)
  }
})

 

微信小程序开发中的表单验证与数据提交
吃不胖.
02-27 626
微信小程序开发中的表单验证与数据提交是非常重要的内容，它们直接影响到用户输入数据的准确性和数据的安全性。本文将以5000字以上的篇幅，详细讲解微信小程序开发中的表单验证和数据提交的相关知识，并给出相应的代码案例。以上就是微信小程序开发中的表单验证与数据提交的内容，通过对用户输入的数据进行验证并将其提交到服务器，可以保证数据的准确性和安全性。常见的表单验证包括验证输入是否为空、验证输入长度是否符合要求、验证输入格式是否正确等。数据提交是指将用户输入的数据发送到服务器，以完成后续的数据处理和存储。
微信小程序开发之表单验证（WxValidate使用）
热门推荐
Callback的博客
08-24 7万+
微信小程序的开发框架个人感觉大体上跟VUE是差不多的，但是他的表单组件没有自带的验证功能，因此开发小程序的表单验证时候一般有两种方法，一是自己裸写验证规则，但是需要比较扎实的正则表达式基础，一种是利用官方社区开发的WxValidate插件进行表单验证。 WxValidate插件是参考 jQuery Validate 封装的，为小程序表单提供了一套常用的验证规则，包括手机号码、电子邮件验证等等，...
微信小程序开发中的表单提交与数据验证
qq_67153941的博客
06-03 622
微信小程序开发中的表单提交与数据验证是一个常见的功能需求。在本篇文章中，我将通过一个具体的案例来介绍如何实现这个功能，包括表单的布局与样式、数据的收集与提交、以及验证输入数据的有效性。首先，我们需要创建一个新的小程序页面，命名为form。
微信小程序省市区选择器组件开发实战
最新发布
weixin_42600407的博客
05-20 955
微信小程序已经成为移动互联网领域内不可或缺的一部分，它为用户提供了便捷的服务。在很多实际应用场合中，如电商、物流、表单填写等，需要用户选择自己所在的地区，这就需要一个省市区选择器。省市区选择器是一个多级联动的组件，允许用户从国家、省、市、区等不同层级进行选择。由于微信小程序本身不提供内置的省市区选择器组件，开发者需要自己开发或寻找合适的第三方组件。本文将探讨如何在微信小程序中实现一个高效、易用的省市区选择器，并详细介绍其自定义组件的实现，以及相关的设计和优化技巧。
微信小程序 表单Form实例详解（附源码）
12-29
微信小程序 表单Form实例 表单Form的应用很广泛，我们可以利用form设计登录注册，也可以设计一种答题问卷的形式，今天主要讲一下form的使用 form表单，将组件内输入的”switch”,”input”,”checkbox”,”slider”,”radio”,”picker”的值进行提交,数据的格式为：name:value，所以表单中控件都需要添加name属性，否则找不到对应控件的值。其主要属性： 主要代码，创建一个form表单： <!--pages/index/Component/FormM/FormM.wxml--> <view class=viewTitle> <te
2_微信小程序官方组件文档（带目录）.7z
03-11
2_微信小程序官方组件文档（带目录），详细的介绍了微信小程序开发过程，方便读者查找使用，给小程序开发带来帮助
微信小程序开发实战——芒果TV原生框架源码剖析
例如，使用微信小程序提供的视图容器、基础内容、表单组件、导航等组件，可以快速搭建小程序的用户界面。通过使用WXML和WXSS，开发者可以实现页面布局和样式设计，而JavaScript则用于处理用户交互逻辑和数据处理。 ...
微信小程序页面布局——上中下结构
weixin_44886300的博客
08-12 4280
小程序页面布局——上中下结构 内容简述 上中下结构：头脚固定+中间滚动框 使用UI框架：Vant Weapp(引入安装参考) 为了方便，使用了less生成wxss，所以展示的是less代码，有需要可以看：https://www.jianshu.com/p/998d77d46c00 思路：先用view把页面分成上中下三部分，整个页面用flex布局，头部和脚部位置固定高度，滚动区域使用 <scroll-view></scroll-view> 标签，中间区域设置为flex:1。 实例
手把手带你学习微信小程序 —— 十一 （button 按钮条组件微介绍）
2401_83916030的博客
04-21 1343
本人面试腾讯，阿里，百度等企业总结下来的面试经历，都是真实的，分享给大家！
微信小程序开发中的第三方组件与插件使用
master_chenchen的博客
09-10 1776
最后，不妨看看其他用户的评价和插件的更新频率，这能在一定程度上反映出插件的质量和开发者的态度。你可以把这里当作自己的家，无论是工作之余的小憩，还是寻找灵感的驿站，我都希望你能在这里找到属于你的那份快乐和满足。，这是一个基于 Vue.js 核心库的小程序开发框架，如果你熟悉Vue.js，那么使用mpvue将会非常得心应手，因为它允许你用Vue的方式来开发微信小程序。构建可持续发展的项目生态，为了确保你的小程序能够长期稳定运行，不仅要关注当前使用的组件和插件，还要考虑未来可能出现的变化。
微信小程序开发中常用的组件介绍
master_chenchen的博客
09-13 1396
在微信小程序的世界里，组件就像是搭建应用的积木块，每一个组件都有其独特的功能和用途。通过合理搭配和使用这些组件，开发者可以轻松构建出功能丰富、界面美观的小程序。想象一下，当你想要创建一个具有复杂交互功能的小程序时，如果没有合适的组件来辅助，那么开发工作将会变得相当繁琐。而借助微信小程序提供的丰富组件库，即使是初学者也能快速上手，打造出令人眼前一亮的作品。然而，要在众多组件中找到最适合项目需求的那一块“积木”，并不是一件容易的事。开发者需要对各种组件的功能和应用场景有所了解，才能在实际开发中游刃有余。
微信小程序-媒体及表单组件demo
01-23
微信小程序-媒体及表单组件demo 用于小程序表单制作以及媒体资源交互
微信小程序学习demo：表单练习(源代码+截图)
06-19
微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码+截图)微信小程序学习demo：表单练习(源代码
小程序表单（个人资料编辑）的Demo
03-28
小程序的表单demo，包含姓名、生日选择器、籍贯选择器、等字段功能
uniapp和springboot微信小程序开发实战：前端架构之微信小程序开发表单提交功能
xuemeng2016的专栏
06-21 1012
基本上很多项目都有类似于意见反馈、留言等形式的表单提交功能，今天给大家介绍的是使用uniapp和vue组件实现的表单提交功能。表单组件的使用vue必须要熟悉会使用下拉列表、文件输入框等组件的使用技巧。
微信小程序15: 小程序组件
饭一口口吃的博客
05-07 3204
微信小程序组件是小程序的核心应用，如何进行自定义组件，组件的样式如何设定，父组件如何应用子组件，组件插槽，组件监控器如何使用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值