小程序组件（表单组件）

最新推荐文章于 2024-05-10 09:42:00 发布
最新推荐文章于 2024-05-10 09:42:00 发布
阅读量2.8k 收藏 1
点赞数
分类专栏： 微信小程序 学习 基础 文章标签： 微信 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cmwly/article/details/104563210
版权
基础 同时被 3 个专栏收录
24 篇文章 0 订阅
订阅专栏
学习
18 篇文章 0 订阅
订阅专栏
微信小程序
8 篇文章 0 订阅
订阅专栏

button(按钮)

Ps：
1、button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
2、bindgetphonenumber 从1.2.0 开始支持，但是在1.5.3以下版本中无法使用wx.canIUse进行检测，建议使用基础库版本进行判断。
3、在bindgetphonenumber 等返回加密信息的回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。
4、从 2.1.0 起，button 可作为原生组件的子节点嵌入，以便在原生组件上使用 open-type 的能力。
5、目前设置了 form-type 的 button 只会对当前组件中的 form 有效。因而，将 button 封装在自定义组件中，而 from 在自定义组件外，将会使这个 button 的 form-type 失效。

属性类型默认值必填说明最低版本
sizestringdefault否按钮的大小1.0.0
typestringdefault否按钮的样式类型1.0.0
plainbooleanfalse否按钮是否镂空，背景色透明1.0.0
disabledbooleanfalse否是否禁用1.0.0
loadingbooleanfalse否名称前是否带 loading 图标1.0.0
form-typestring否用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件1.0.0
open-typestring否微信开放能力1.1.0
hover-classstringbutton-hover否指定按钮按下去的样式类。当 hover-class=“none” 时，没有点击态效果1.0.0
hover-stop-propagationbooleanfalse否指定是否阻止本节点的祖先节点出现点击态1.5.0
hover-start-timenumber20否按住后多久出现点击态，单位毫秒1.0.0
hover-stay-timenumber70否手指松开后点击态保留时间，单位毫秒1.0.0
langstringen否指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。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
app-parameterstring否打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效1.9.5
show-message-cardbooleanfalse否是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效1.5.0
bindgetuserinfoeventhandle否用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效1.3.0
bindcontacteventhandle否客服消息回调，open-type="contact"时有效1.5.0
bindgetphonenumbereventhandle否获取用户手机号回调，open-type=getPhoneNumber时有效1.2.0
binderroreventhandle否当使用开放能力时，发生错误的回调，open-type=launchApp时有效1.9.5
bindopensettingeventhandle否在打开授权设置页后回调，open-type=openSetting时有效2.0.7
bindlaunchappeventhandle否打开 APP 成功的回调，open-type=launchApp时有效2.4.4
size 的合法值
值说明
default默认大小
mini小尺寸
type 的合法值
值说明
primary绿色
default白色
warn红色
form-type 的合法值
值说明
submit提交表单
reset重置表单
open-type 的合法值
值说明最低版本
contact打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明1.1.0
share触发用户转发，使用前建议先阅读使用指引1.2.0
getPhoneNumber获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明1.2.0
getUserInfo获取用户信息，可以从bindgetuserinfo回调中获取到用户信息1.3.0
launchApp打开APP，可以通过app-parameter属性设定向APP传的参数具体说明1.9.5
openSetting打开授权设置页2.0.7
feedback打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容2.1.0
lang 的合法值
值说明
en英文
zh_CN简体中文
zh_TW繁体中文

checkbox-group（多项选择器，内部由多个checkbox组成）

属性类型默认值必填说明最低版本
bindchangeEventHandle否checkbox-group中选中项发生改变时触发 change 事件，detail = {value:[选中的checkbox的value的数组]}1.0.0

checkbox（多选项目）

属性类型默认值必填说明最低版本
valuestring否checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value1.0.0
disabledbooleanfalse否是否禁用1.0.0
checkedbooleanfalse否当前是否选中，可用来设置默认选中1.0.0
colorstring#09BB07否checkbox的颜色，同css的color1.0.0

editor（富文本编辑器，可以对图片、文字进行编辑）

编辑器导出内容支持带标签的 html和纯文本的 text，编辑器内部采用 delta 格式进行存储。
通过setContents接口设置内容时，解析插入的 html 可能会由于一些非法标签导致解析错误，建议开发者在小程序内使用时通过 delta 进行插入。
富文本组件内部引入了一些基本的样式使得内容可以正确的展示，开发时可以进行覆盖。需要注意的是，在其它组件或环境中使用富文本组件导出的html时，需要额外引入 这段样式，并维护<ql-container><ql-editor></ql-editor></ql-container>的结构。
图片控件仅初始化时设置有效。

外部使用时样式地址：[样式地址](data:application/zip;base64,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)
相关 api：https://developers.weixin.qq.com/miniprogram/dev/api/media/editor/EditorContext.html

属性类型默认值必填说明最低版本
read-onlybooleanfalse否设置编辑器为只读2.7.0
placeholderstring否提示信息2.7.0
show-img-sizebooleanfalse否点击图片时显示图片大小控件2.7.0
show-img-toolbarbooleanfalse否点击图片时显示工具栏控件2.7.0
show-img-resizebooleanfalse否点击图片时显示修改尺寸控件2.7.0
bindreadyeventhandle否编辑器初始化完成时触发2.7.0
bindfocuseventhandle否编辑器聚焦时触发，event.detail = {html, text, delta}2.7.0
bindblureventhandle否编辑器失去焦点时触发，detail = {html, text, delta}2.7.0
bindinputeventhandle否编辑器内容改变时触发，detail = {html, text, delta}2.7.0
bindstatuschangeeventhandle否通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式2.7.0

Ps： 编辑器内支持部分 HTML 标签和内联样式，不支持class和id

支持的标签
不满足的标签会被忽略，<div>会被转行为<p>储存。

类型节点
行内元素<span> <strong> <b> <ins> <em> <i> <u> <a> <del> <s> <sub> <sup> <img>
块级元素<p> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <ol> <ul> <li>

支持的内联样式
内联样式仅能设置在行内元素或块级元素上，不能同时设置。例如 font-size 归类为行内元素属性，在 p 标签上设置是无效的。

类型样式
块级样式text-align direction margin margin-top margin-left margin-right margin-bottom
padding padding-top padding-left padding-right padding-bottom line-height text-indent
行内样式font font-size font-style font-variant font-weight font-family
letter-spacing text-decoration color background-color

Ps:
1、使用 catchtouchend 绑定事件则不会使编辑器失去焦点(2.8.3)
2、插入的 html 中事件绑定会被移除
3、formats 中的 color 属性会统一以 hex 格式返回
4、粘贴时仅纯文本内容会被拷贝进编辑器
5、插入 html 到编辑器内时，编辑器会删除一些不必要的标签，以保证内容的统一。例如<p><span>xxx</span></p>会改写为<p>xxx</p>
6、编辑器聚焦时页面会被上推，系统行为以保证编辑区可见

form(表单)

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

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

input(输入组件，原生组件)

属性类型默认值必填说明最低版本
valuestring是输入框的初始内容1.0.0
typestringtext否input 的类型1.0.0
passwordbooleanfalse否是否是密码类型1.0.0
placeholderstring是输入框为空时占位符1.0.0
placeholder-stylestring是指定 placeholder 的样式1.0.0
placeholder-classstringinput-placeholder否指定 placeholder 的样式类1.0.0
disabledbooleanfalse否是否禁用1.0.0
maxlengthnumber140否最大输入长度，设置为 -1 的时候不限制最大长度1.0.0
cursor-spacingnumber0否指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离1.0.0
auto-focusbooleanfalse否(即将废弃，请直接使用 focus )自动聚焦，拉起键盘1.0.0
focusbooleanfalse否获取焦点1.0.0
confirm-typestringdone否设置键盘右下角按钮的文字，仅在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
hold-keyboardbooleanfalse否focus时，点击页面的时候不收起键盘2.8.2
bindinputeventhandle是键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。1.0.0
bindfocuseventhandle是输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持1.0.0
bindblureventhandle是输入框失去焦点时触发，event.detail = {value: value}1.0.0
bindconfirmeventhandle是点击完成按钮时触发，event.detail = {value: value}1.0.0
bindkeyboardheightchangeeventhandle是键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}2.7.0

type 的合法值

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

confirm-type 的合法值

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

Ps：
1、confirm-type的最终表现与手机输入法本身的实现有关，部分安卓系统输入法和第三方输入法可能不支持或不完全支持
2、input 组件是一个原生组件，字体是系统字体，所以无法设置 font-family
3、在 input 聚焦期间，避免使用 css 动画
4、对于将 input 封装在自定义组件中、而 form 在自定义组件外的情况， form 将不能获得这个自定义组件中 input 的值。此时需要使用自定义组件的 内置 behaviors wx://form-field
5、键盘高度发生变化，keyboardheightchange事件可能会多次触发，开发者对于相同的height值应该忽略掉
6、bug : 微信版本 6.3.30, focus 属性设置无效
7、bug : 微信版本 6.3.30, placeholder 在聚焦时出现重影问题

label（for循环承载标签）

目前可以绑定的控件有：button, checkbox, radio, switch。

属性类型必填说明最低版本
forstring否绑定控件的 id1.0.0

picker(从底部弹起的滚动选择器)

属性类型默认值必填说明最低版本
modestringselector否选择器类型1.0.0
disabledbooleanfalse否是否禁用1.0.0
bindcanceleventhandle否取消选择时触发1.9.90

mode 的合法值

值说明
selector普通选择器
multiSelector多列选择器
time时间选择器
date日期选择器
region省市区选择器

除了上述通用的属性，对于不同的mode，picker拥有不同的属性。

普通选择器：mode = selector

属性名类型说明
rangearray/object array[]mode 为 selector 或 multiSelector 时，range 有效
range-keystring当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
valuenumber0表示选择了 range 中的第几个（下标从 0 开始）
bindchangeeventhandlevalue 改变时触发 change 事件，event.detail = {value}

多列选择器：mode = multiSelector

属性名类型默认值说明
rangearray/object array[]mode 为 selector 或 multiSelector 时，range 有效
range-keystring当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
valuearray[]表示选择了 range 中的第几个（下标从 0 开始）
bindchangeeventhandlevalue 改变时触发 change 事件，event.detail = {value}
bindcolumnchangeeventhandle列改变时触发

时间选择器：mode = time

属性名类型默认值说明
valuestring表示选中的时间，格式为"hh:mm"
startstring表示有效时间范围的开始，字符串格式为"hh:mm"
endstring表示有效时间范围的结束，字符串格式为"hh:mm"
bindchangeeventhandlevalue 改变时触发 change 事件，event.detail = {value}

日期选择器：mode = date

属性名类型默认值说明
valuestring0表示选中的日期，格式为"YYYY-MM-DD"
startstring表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
endstring表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
fieldsstringday有效值 year,month,day，表示选择器的粒度
bindchangeeventhandlevalue 改变时触发 change 事件，event.detail = {value}

fields 有效值：

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

省市区选择器：mode = region 1.4.0

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

picker-view（嵌入页面的滚动选择器）

其中只可放置 picker-view-column组件，其它节点不会显示。

属性类型必填说明最低版本
valueArray.<number>否数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。1.0.0
indicator-stylestring否设置选择器中间选中框的样式1.0.0
indicator-classstring否设置选择器中间选中框的类名1.1.0
mask-stylestring否设置蒙层的样式1.5.0
mask-classstring否设置蒙层的类名1.5.0
bindchangeeventhandle否滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）1.0.0
bindpickstarteventhandle否当滚动选择开始时候触发事件2.3.1
bindpickendeventhandle否当滚动选择结束时候触发事件2.3.1

例子：

    <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>

picker-view-column（滚动选择器子项）

仅可放置于picker-view中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致

radio（单选项目）

属性类型默认值必填说明最低版本
valuestring否radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value1.0.0
checkedbooleanfalse否当前是否选中1.0.0
disabledbooleanfalse否是否禁用1.0.0
colorstring#09BB07否radio的颜色，同css的color1.0.0

例子：

 <radio-group class="radio-group" bindchange="radioChange">
                <radio class="radio" wx:for-items="{{items}}" wx:key="name" value="{{item.name}}" checked="{{item.checked}}">
                    <text>{{item.value}}</text>
                </radio>
            </radio-group>

radio-group(单项选择器，内部由多个 radio 组成)

属性类型必填说明最低版本
bindchangeEventHandle否radio-group中选中项发生改变时触发 change 事件，detail = {value:[选中的radio的value的数组]}1.0.0

slider(滑动选择器)

属性类型默认值必填说明最低版本
minnumber0否最小值1.0.0
maxnumber100否最大值1.0.0
stepnumber1否步长，取值必须大于 0，并且可被(max - min)整除1.0.0
disabledbooleanfalse否是否禁用1.0.0
valuenumber0否当前取值1.0.0
colorcolor#e9e9e9否背景条的颜色（请使用 backgroundColor）1.0.0
selected-colorcolor#1aad19否已选择的颜色（请使用 activeColor）1.0.0
activeColorcolor#1aad19否已选择的颜色1.0.0
backgroundColorcolor#e9e9e9否背景条的颜色1.0.0
block-sizenumber28否滑块的大小，取值范围为 12 - 281.9.0
block-colorcolor#ffffff否滑块的颜色1.9.0
show-valuebooleanfalse否是否显示当前 value1.0.0
bindchangeeventhandle否完成一次拖动后触发的事件，event.detail = {value}1.0.0
bindchangingeventhandle否拖动过程中触发的事件，event.detail = {value}1.7.0

switch(开关选择器)

属性类型默认值必填说明最低版本
checkedbooleanfalse否是否选中1.0.0
disabledbooleanfalse否是否禁用1.0.0
typestringswitch否样式，有效值：switch, checkbox1.0.0
colorstring#04BE02否switch 的颜色，同 css 的 color1.0.0
bindchangeeventhandle否checked 改变时触发 change 事件，event.detail={ value}1.0.0

textarea(多行输入框,原生组件)

属性类型默认值必填说明最低版本
valuestring否输入框的内容1.0.0
placeholderstring否输入框为空时占位符1.0.0
placeholder-stylestring否指定 placeholder 的样式，目前仅支持color,font-size和font-weight1.0.0
placeholder-classstringtextarea-placeholder否指定 placeholder 的样式类1.0.0
disabledbooleanfalse否是否禁用1.0.0
maxlengthnumber140否最大输入长度，设置为 -1 的时候不限制最大长度1.0.0
auto-focusbooleanfalse否自动聚焦，拉起键盘。1.0.0
focusbooleanfalse否获取焦点1.0.0
auto-heightbooleanfalse否是否自动增高，设置auto-height时，style.height不生效1.0.0
fixedbooleanfalse否如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true1.0.0
cursor-spacingnumber0否指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离1.0.0
cursornumber-1否指定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
hold-keyboardbooleanfalse否focus时，点击页面的时候不收起键盘2.8.2
disable-default-paddingbooleanfalse否是否去掉 iOS 下的默认内边距2.10.0
bindfocuseventhandle否输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持1.0.0
bindblureventhandle否输入框失去焦点时触发，event.detail = {value, cursor}1.0.0
bindlinechangeeventhandle否输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}1.0.0
bindinputeventhandle否当键盘输入时，触发 input 事件，event.detail = {value, cursor, keyCode}，keyCode 为键值，目前工具还不支持返回keyCode参数。bindinput 处理函数的返回值并不会反映到 textarea 上1.0.0
bindconfirmeventhandle否点击完成时， 触发 confirm 事件，event.detail = {value: value}1.0.0
bindkeyboardheightchangeeventhandle否键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}2.7.0

Ps：
1、textarea 的 blur 事件会晚于页面上的 tap 事件，如果需要在 button 的点击事件获取 textarea，可以使用 form 的 bindsubmit。
2、不建议在多行文本上对用户的输入进行修改，所以 textarea 的 bindinput 处理函数并不会将返回值反映到 textarea 上。
3、键盘高度发生变化，keyboardheightchange事件可能会多次触发，开发者对于相同的height值应该忽略掉
4、bug: 微信版本 6.3.30，textarea 在列表渲染时，新增加的 textarea 在自动聚焦时的位置计算错误。

例子：

 <form bindsubmit="bindFormSubmit">
    <textarea placeholder="form 中的 textarea" name="textarea"/>
    <button form-type="submit"> 提交 </button>
  </form>

2、不建议在多行文本上对用户的输入进行修改，所以 textarea 的 bindinput 处理函数并不会将返回值反映到 textarea 上。
3、键盘高度发生变化，keyboardheightchange事件可能会多次触发，开发者对于相同的height值应该忽略掉
4、bug: 微信版本 6.3.30，textarea 在列表渲染时，新增加的 textarea 在自动聚焦时的位置计算错误。

例子：

 <form bindsubmit="bindFormSubmit">
    <textarea placeholder="form 中的 textarea" name="textarea"/>
    <button form-type="submit"> 提交 </button>
  </form>
Loren_Wang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
微信小程序_文档_07_组件_表单组件
pre_eminent的JAVA学习园地
06-02 1084
button按钮。属性名类型默认值说明生效时机最低版本sizeStringdefault按钮的大小  typeStringdefault按钮的样式类型  plainBooleanfalse按钮是否镂空，背景色透明  disabledBooleanfalse是否禁用  loadingBooleanfalse名称前是否带 loading 图标  form-typeString 用于 &lt;form/...
小程序的表单组件
Richard_666的博客
11-22 333
一、form组件 button checkbox-group form input picker 选择器 普通选择器：mode=selector 多列选择器：mode=multiSelector picker-view radio单选框 slider switch navigat...
微信小程序（组件--表单：交互控件）
最新发布
2401_83641314的博客
05-10 731
注意：confirm-type的最终表现与手机输入法本身的实现有关，部分安卓系统输入法和第三方输入法可能不支持或不完全支持。场景：当填写项较多时，可能超出当前屏幕，此时需要对弹起的软键盘做些处理 案例：bindconfirmFn(option){ console.log(option) },输入“哈哈”点击搜索 input输入框现有bug：部分微信版本placeholder 在聚焦时出现重影问题 部分机型 focus 属性设置无效 input 组件是一个原生组件，字体是系统字体，所以无法设置 f
小程序组件---表单组件
一只琪琪子的博客
09-04 876
** （1）button按钮组件 ** button按钮属性 按钮大小size属性值 按钮type样式类型 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190813190035882.png button按钮hover类属性 ** 对比： ①view视图组件hover-start-time默认50，hover-stay-time默认400 ②...
微信小程序常用表单组件
冲出仁川，走出马德里，故事还会再继续
03-16 9533
微信小程序常用表单组件1、常用表单组件1.1 button1.2 checkbox1.3 input1.4 label1.5 form1.6 radio1.7 slider1.8 switch1.9 textarea2、实训小案例--问卷调查 1、常用表单组件 1.1 button   <button>为按钮组件，是常用的表单组件之一，用于事件的触发以及表单的提交。其属性表如下所示。 代码示例： <view class="demo-box"> <view class="t
小程序开发----表单控件
scwMason的博客
09-22 389
&lt;!--miniprogram/pages/Formdemo1/form.wxml--&gt; &lt;swiper indicator-dots='true' autoplay='true' interval='3000' duration='1000' circular='true'&gt; &lt;block wx:for="{{imgURLS}}"&gt; &lt;sw...
小程序日期时间组件demo
12-12
在微信小程序开发中，日期时间组件是不可或缺的一部分，它允许用户方便地选择日期或时间，常见于各种表单填写、预约服务或者日程安排等场景。本教程将深入讲解“小程序日期时间组件demo”，帮助开发者了解如何在小...
微信小程序开发之（表单组件的使用）
06-28
在微信小程序的开发中，表单组件是构建用户交互界面不可或缺的部分。本教程将深入探讨如何利用微信小程序的API和组件来实现视频播放、轮转图片、多选框、单选框以及实时获取输入值等功能，并通过按钮提交输入控件的...
微信小程序-组件练习
03-15
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的、无需下载安装即可使用的应用体验。在这个“微信小程序-组件练习”中，我们可以深入学习和实践微信小程序的各种组件功能...
微信小程序实现表单校验功能
08-29
"微信小程序实现表单校验功能" 微信小程序实现表单校验功能是小程序开发中最难实现的公共业务之一。表单校验的难点在于表单组件的多样性和校验规则的多样性，导致复杂度达到n³。解决这个问题的关键是组件化和非...
微信小程序组件demo
02-06
本项目“微信小程序组件demo”旨在展示微信小程序中的组件使用方法，特别是与用户交互和数据管理相关的功能。 在这个示例中，核心知识点主要包括以下几个方面： 1. **列表组件（<view> 和 ）**：微信小程序中，...
微信小程序表单自定义组件vest-form-master.zip
09-25
微信小程序表单自定义组件vest-form-master.zip
05-微信小程序常用组件-表单组件
感谢关注-最近在编写开源的自动化测试框架还没整理完
08-18 1381
1.表单组件 2.button按钮\案例代码 3.form表单\案例代码 4.image图片支持长按识别的码\案例代码
微信小程序（第二十一章）- 表单相关组件的介绍
weixin_42178241的博客
01-28 1009
微信小程序（第二十一章）- 表单相关组件的介绍链接表单组件介绍buttoncheckboxforminputpickerswitch 链接 文档地址 表单组件介绍 button button 按钮。 常用属性如下(具体见文档)： size type plain disabled loading form-type open-type checkbox checkbox多选项目。 所有属性如下： value disabled checked color form form将组件内的用户输入的switc
微信小程序form组件
sinat_36947685的博客
01-18 1033
form 组件 表单 主要属性： 效果图： form.wxml添加代码： form.js添加代码： form.wxss添加代码： 原文链接：http://bbs.jointforce.com/topic/23116 注意： form表单组件 是提交form内的所有选中属性的值， 注意每个form表单内的组件都必须有na
小程序：基础内容和表单组件总结
tomorrownan的博客
06-04 1517
前言 经过这么久的学习，可以看出来小程序中组件的使用方法就跟html的标签一样，标签有起始<tagname>和闭合</tagname>，可以拿来直接使用，然后属性直接在<tagname>中调用，例如，使用button组件的type属性，可以这样用： <button type='primary'></button> 1.基础内容组件 基础...
【微信小程序】进阶篇 -- 表单组件 - picker 实现日期选择器（五十三）
热门推荐
JMFive的博客
04-07 1万+
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第53篇文章;今天开始学习微信小程序的第40天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
一个简单的微信小程序表单提交样式模板
m0_52244931的博客
03-10 1256
没什么东西，只是方便自己直接复制使用。
微信小程序form表单组件
04-29
微信小程序的form表单组件是用于集用户输入信息的组件。它提供了一系列的表单元素，如input、textarea、picker等，可以方便地收集用户的文本、数字、日期等类型的数据。 form组件的基本用法是将需要收集数据的表单元素放在form标签内，当用户点击提交按钮时，会触发form组件的submit事件，开发者可以在事件处理函数中获取用户输入的数据并进行处理。 以下是form组件的一些常用属性和事件： 1. 属性： - report-submit：是否返回 formId 用于发送模板消息，默认为false。 - report-submit-timeout：当使用了report-submit时，等待提交表单事件返回结果的时间，默认为0。 2. 事件： - submit：表单提交事件，当用户点击提交按钮时触发。 - reset：表单重置事件，当用户点击重置按钮时触发。 在使用form组件时，需要注意以下几点： - form组件必须放在page页面的顶层节点中。 - form组件内只能包含以下几种表单元素：input、textarea、checkbox、radio、switch、picker、slider。 - form组件内的checkbox-group和radio-group组件也可以放在form内，但不会触发submit事件。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值