微信小程序开发文档 第32页

input 基础库 1.0.0 开始支持，低版本需做兼容处理。 输入框。该组件是原生组件，使用时请注意相关限制 属性 类型 默认值 必填 说明 最低版本 value string 是 输入框的初始内容 1.0.0 type string text 否 input 的类型 1.0.0 password boolean false 否 是否是密码类型 1.0.0 placeholder string 是 输入框为空时占位符 1.0.0 placeholder-style string 是 指定 placeholder 的样式 1.0.0 placeholder-class string input-placeholder 否 指定 placeholder 的样式类 1.0.0 disabled boolean false 否 是否禁用 1.0.0 maxlength number 140 否 最大输入长度，设置为 -1 的时候不限制最大长度 1.0.0 cursor-spacing number 0 否 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 1.0.0 auto-focus boolean false 否 (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 1.0.0 focus boolean false 否 获取焦点 1.0.0 confirm-type string done 否 设置键盘右下角按钮的文字，仅在type=’text’时生效 1.1.0 confirm-hold boolean false 否 点击键盘右下角按钮时是否保持键盘不收起 1.1.0 cursor number 是 指定focus时的光标位置 1.5.0 selection-start number -1 否 光标起始位置，自动聚集时有效，需与selection-end搭配使用 1.9.0 selection-end number -1 否 光标结束位置，自动聚集时有效，需与selection-start搭配使用 1.9.0 adjust-position boolean true 否...

微信小程序form 基础库 1.0.0 开始支持，低版本需做兼容处理。 表单。将组件内的用户输入的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 示例代码： <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">...

微信小程序表单组件 checkbox 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 示例： <checkbox-group bindchange="checkboxChange"> <label class="checkbox" wx:for-items="{{items}}"> <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} </label> </checkbox-group> Page({ data: { items: [ {name: 'USA', value: '美国'}, {name: 'CHN', value: '中国', checked: 'true'}, {name: 'BRA', value: '巴西'}, {name: 'JPN', value: '日本'}, {name: 'ENG', value: '英国'}, {name: 'TUR', value: '法国'}, ] }, checkboxChange: function(e) { console.log('checkbox发生change事件，携带value值为：', e.detail.value) } })

button 基础库 1.0.0 开始支持，低版本需做兼容处理。 按钮。 属性 类型 默认值 必填 说明 最低版本 size string default 否 按钮的大小 1.0.0 type string default 否 按钮的样式类型 1.0.0 plain boolean false 否 按钮是否镂空，背景色透明 1.0.0 disabled boolean false 否 是否禁用 1.0.0 loading boolean false 否 名称前是否带 loading 图标 1.0.0 form-type string 否 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件 1.0.0 open-type string 否 微信开放能力 1.1.0 hover-class string button-hover 否 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果 1.0.0 hover-stop-propagation boolean false 否 指定是否阻止本节点的祖先节点出现点击态 1.5.0 hover-start-time number 20 否 按住后多久出现点击态，单位毫秒 1.0.0 hover-stay-time number 70 否 手指松开后点击态保留时间，单位毫秒 1.0.0 lang string en 否 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 1.3.0 session-from string 否 会话来源，open-type=”contact”时有效 1.4.0 send-message-title string 当前标题 否 会话内消息卡片标题，open-type=”contact”时有效 1.5.0 send-message-path string 当前分享路径 否 会话内消息卡片点击跳转小程序路径，open-type=”contact”时有效 1.5.0 send-message-img string 截图 否 会话内消息卡片图片，open-type=”contact”时有效 1.5.0 app-parameter string 否 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 1.9.5...

progress 基础库 1.0.0 开始支持，低版本需做兼容处理。 进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。 属性 类型 默认值 必填 说明 最低版本 percent number 否 百分比0~100 1.0.0 show-info boolean false 否 在进度条右侧显示百分比 1.0.0 border-radius number/string 0 否 圆角大小 2.3.1 font-size number/string 16 否 右侧百分比字体大小 2.3.1 stroke-width number/string 6 否 进度条线的宽度 1.0.0 color string #09BB07 否 进度条颜色（请使用activeColor） 1.0.0 activeColor string #09BB07 否 已选择的进度条的颜色 1.0.0 backgroundColor string #EBEBEB 否 未选择的进度条的颜色 1.0.0 active boolean false 否 进度条从左往右的动画 1.0.0 active-mode string backwards 否 backwards: 动画从头播；forwards：动画从上次结束点接着播 1.7.0 duration number 30 否 进度增加1%所需毫秒数 2.8.2 bindactiveend eventhandle 否 动画完成事件 2.4.1 示例代码 <view class="progress-box"> <progress percent="20" show-info stroke-width="3"/> </view> <view class="progress-box"> <progress percent="40" active stroke-width="3" /> <icon class="progress-cancel" type="cancel"></icon> </view> <view class="progress-box"> <progress percent="60" active stroke-width="3" /> </view> <view class="progress-box"> <progress percent="80" color="#10AEFF" active stroke-width="3" /> </view>

text  文本。 属性名 类型 默认值 说明 最低版本 selectable Boolean false 文本是否可选 1.1.0 space String false 显示连续空格 1.4.0 decode Boolean false 是否解码 1.4.0 space 有效值： 值 说明 ensp 中文字符空格一半大小 emsp 中文字符空格大小 nbsp 根据字体设置的空格大小 Tips decode可以解析的有 &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp; 各个操作系统的空格标准并不一致。 <text/> 组件内只支持 <text/> 嵌套。 除了文本节点以外的其他节点都无法长按选中。 示例： 代码片段 <view class="btn-area"> <view class="body-view"> <text>{{text}}</text> <button bindtap="add">add line</button> <button bindtap="remove">remove line</button> </view> </view> var initData = 'this is first line\nthis is second line' var extraLine = []; Page({ data: { text: initData }, add: function(e) { extraLine.push('other line') this.setData({ text: initData + '\n' + extraLine.join('\n') }) }, remove: function(e) { if (extraLine.length > 0) { extraLine.pop() this.setData({ text: initData + '\n' + extraLine.join('\n') }) } } })

icon 基础库 1.0.0 开始支持，低版本需做兼容处理。 图标。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。 属性名 类型 默认值 说明 type String   icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear size Number 23 icon的大小，单位px color Color   icon的颜色，同css的color 示例： <view class="container"> <view class="icon-box"> <icon class="icon-box-img" type="success" size="93"></icon> <view class="icon-box-ctn"> <view class="icon-box-title">成功</view> <view class="icon-box-desc">用于表示操作顺利完成</view> </view> </view> <view class="icon-box"> <icon class="icon-box-img" type="info" size="93"></icon> <view class="icon-box-ctn"> <view class="icon-box-title">提示</view> <view class="icon-box-desc">用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息</view> </view> </view> <view class="icon-box"> <icon class="icon-box-img" type="warn" size="93" color="#C9C9C9"></icon> <view class="icon-box-ctn"> <view class="icon-box-title">普通警告</view> <view class="icon-box-desc">用于表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果</view> </view> </view> <view class="icon-box"> <icon class="icon-box-img" type="warn" size="93"></icon> <view class="icon-box-ctn"> <view class="icon-box-title">强烈警告</view> <view class="icon-box-desc">用于表示由于用户原因造成的负向结果；也用于表示操作后将引起不可挽回的严重后果的情况</view> </view> </view> <view class="icon-box"> <icon class="icon-box-img" type="waiting" size="93"></icon> <view class="icon-box-ctn"> <view class="icon-box-title">等待</view> <view class="icon-box-desc">用于表示等待，告知用户结果需等待</view> </view> </view> <view class="icon-box"> <view class="icon-small-wrp"> <icon class="icon-small" type="success_no_circle" size="23"></icon> </view> <view class="icon-box-ctn"> <view class="icon-box-title">多选控件图标_已选择</view> <view class="icon-box-desc">用于多选控件中，表示已选择该项目</view> </view> </view>...

cover-image 基础库 1.4.0 开始支持，低版本需做兼容处理。 覆盖在原生组件之上的图片视图。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。 属性 类型 默认值 必填 说明 最低版本 src string 否 图标路径，支持临时路径、网络地址（1.6.0起支持）、云文件ID（2.2.3起支持）。 1.4.0 bindload eventhandle 否 图片加载成功时触发 2.1.0 binderror eventhandle 否 图片加载失败时触发 2.1.0 支持的格式 格式 iOS Android JPG √ √ PNG √ √ SVG x x WEBP √ √ GIF √ √ BASE64 x x

cover-view 基础库 1.4.0 开始支持，低版本需做兼容处理。 覆盖在原生组件之上的文本视图。 可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher 只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。 属性 类型 默认值 必填 说明 最低版本 scroll-top number/string 否 设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效 2.1.0 提示 cover-view和cover-image的aria-role仅可设置为button，读屏模式下才可以点击，并朗读出“按钮”；为空时可以聚焦，但不可点击 基础库 2.2.4 起支持 touch 相关事件，也可使用 hover-class 设置点击态 基础库 2.1.0 起支持设置 scale rotate 的 css 样式，包括 transition 动画 基础库 1.9.90 起 cover-view 支持 overflow: scroll，但不支持动态更新 overflow 基础库 1.9.90 起最外层 cover-view 支持 position: fixed 基础库 1.9.0 起支持插在 view 等标签下。在此之前只可嵌套在原生组件map、video、canvas、camera内，避免嵌套在其他组件内。 基础库 1.6.0 起支持css transition动画，transition-property只支持transform (translateX, translateY)与opacity。 基础库 1.6.0 起支持css opacity。 事件模型遵循冒泡模型，但不会冒泡到原生组件。 文本建议都套上cover-view标签，避免排版错误。 只支持基本的定位、布局、文本样式。不支持设置单边的border、background-image、shadow、overflow: visible等。 建议子节点不要溢出父节点 支持使用 z-index 控制层级 默认设置的样式有：white-space: nowrap; line-height: 1.2; display: block; 自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐，否则会导致 cover-view 不显示

movable-area 基础库 1.2.0 开始支持，低版本需做兼容处理 movable-view 的可移动区域 注意：movable-area 必须设置width和height属性，不设置默认为10px movable-view 基础库 1.2.0 开始支持，低版本需做兼容处理 可移动的视图容器，在页面中可以拖拽滑动 属性名 类型 默认值 说明 direction String none movable-view的移动方向，属性值有all、vertical、horizontal、none inertia Boolean false movable-view是否带有惯性 out-of-bounds Boolean false 超过可移动区域后，movable-view是否还可以移动 x Number   定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画 y Number   定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画 damping Number 20 阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快 friction Number 2 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值 movable-view 必须设置width和height属性，不设置默认为10px movable-view 默认为绝对定位，top和left属性为0px 当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑） 注意：movable-view必须在<movable-area/>组件中，并且必须是直接子节点，否则不能移动。 示例代码： <view class="section"> <view class="section__title">movable-view区域小于movable-area</view> <movable-area style="height: 200px;width: 200px;background: red;"> <movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all"> </movable-view> </movable-area> <view class="btn-area"> <button size="mini" bindtap="tap">click me to move to (30px, 30px)</button> </view> <view class="section__title">movable-view区域大于movable-area</view> <movable-area style="height: 100px;width: 100px;background: red;" direction="all"> <movable-view style="height: 200px; width: 200px; background: blue;"> </movable-view> </movable-area> </view> Page({ data: { x: 0, y: 0 }, tap: function(e) { this.setData({ x: 30, y: 30 });...