欢迎来到[自学php网] ①群 287460651

主页 > 专题教程 > 常用语言参考表 >

微信小程序组件说明表

来源:未知    时间:2018-11-03 14:55 作者:小飞侠

[导读] 基础组件 框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。 什么是组件: 组件是视图层的基本组成单元。 组件自带一些功能与微信风格的样式。...

基础组件

框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。

什么是组件:

  • 组件是视图层的基本组成单元。

  • 组件自带一些功能与微信风格的样式。

  • 一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内。

<tagname property="value">
  Content goes here ...</tagename>

属性类型

类型描述注解
Boolean布尔值组件写上该属性,不管该属性等于什么,其值都为true,只有组件上没有写该属性时,属性值才为false。如果属性值为变量,变量的值会被转换为Boolean类型
Number数字1, 2.5
String字符串“string”
Array数组[ 1, “string” ]
Object对象{ key: value }
EventHandler事件处理函数名“handlerName” 是 Page中定义的事件处理函数名
Any任意属性

共同属性类型

属性类型描述注解
idString组件的唯一标示保持整个页面唯一
classString组件的样式类在对应的 WXSS 中定义的样式类
styleString组件的内联样式可以动态设置的内联样式
hiddenString组件是否显示所有组件默认显示
data-*Any自定义属性组件上触发的事件时,会发送给事件处理函数
bind* / catch*EventHandler组件的事件

基本组件列表

基础组件分为以下几类:

视图容器(View Container)基础内容(Basic Content)表单(Form)导航(Navigation)多媒体(Media)地图(Map)画布(Canvas)

视图容器(View Container):

组件名注释组件属性
属性名类型默认值说明最低版本
view视图容器hover-classStringnone指定按下去的样式类。当 hover-class="none" 时,没有点击态效果
hover-stop-propagationBooleanfalse指定是否阻止本节点的祖先节点出现点击态1.5.0
hover-start-timeNumber50按住后多久出现点击态,单位毫秒
hover-stay-timeNumber400手指松开后点击态保留时间,单位毫秒
scroll-view可滚动视图容器scroll-xBooleanfalse允许横向滚动
scroll-yBooleanfalse允许纵向滚动
upper-thresholdNumber50距顶部/左边多远时(单位px),触发 scrolltoupper 事件
lower-thresholdNumber50距底部/右边多远时(单位px),触发 scrolltolower 事件
scroll-topNumber
设置竖向滚动条位置
scroll-leftNumber
设置横向滚动条位置
scroll-into-viewString
值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
scroll-with-animationBooleanfalse在设置滚动条位置时使用动画过渡
enable-back-to-topBooleanfalseiOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向
bindscrolltoupperEventHandle
滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolowerEventHandle
滚动到底部/右边,会触发 scrolltolower 事件
bindscrollEventHandle
滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
swiper滑块视图容器indicator-dotsBooleanfalse是否显示面板指示点
indicator-colorColorrgba(0, 0, 0, .3)指示点颜色1.1.0
indicator-active-colorColor#000000当前选中的指示点颜色1.1.0
autoplayBooleanfalse是否自动切换
currentNumber0当前所在页面的 index
intervalNumber5000自动切换时间间隔
durationNumber500滑动动画时长
circularBooleanfalse是否采用衔接滑动
verticalBooleanfalse滑动方向是否为纵向
bindchangeEventHandle
current 改变时会触发 change 事件,event.detail = {current: current, source: source}

基础内容(Basic Content):

组件名注释组件属性
属性名类型默认值说明最低版本
icon图标typeString
icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
sizeNumber23icon的大小,单位px
colorColor
icon的颜色,同css的color







text文字selectableBooleanfalse文本是否可选1.1.0
spaceStringfalse显示连续空格
有效值 ensp:中文字符空格一半大小 emsp:中文字符空格大小 nbsp:根据字体设置的空格大小
1.4.0
decodeBooleanfalse是否解码1.4.0







progress进度条percentFloat百分比0~100
show-infoBooleanfalse在进度条右侧显示百分比
stroke-widthNumber6进度条线的宽度,单位px
colorColor#09BB07进度条颜色 (请使用 activeColor)
activeColorColor
已选择的进度条的颜色
backgroundColorColor
未选择的进度条的颜色
activeBooleanfalse进度条从左往右的动画
active-modeStringbackwardsbackwards: 动画从头播;forwards:动画从上次结束点接着播1.7.0

表单(Form):

组件名注释组件属性
属性名类型默认值说明生效时机最低版本
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手指松开后点击态保留时间,单位毫秒

bindgetuserinfoHandler
用户点击该按钮时,会返回获取到的用户信息,从返回参数的detail中获取到的值同wx.getUserInfoopen-type="getUserInfo'1.3.0
langStringen指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。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显示会话内消息卡片open-type="contact"1.5.0
bindcontactHandler
客服消息回调open-type="contact"1.5.0
bindgetphonenumberHandler
获取用户手机号回调open-type="getphonenumber"1.2.0
form表单report-submitBoolean
是否返回 formId 用于发送模板消息
bindsubmitEventHandle
携带 form 中的数据触发 submit 事件,event.detail = {value : {'name': 'value'} , formId: ''}
bindresetEventHandle
表单重置时会触发 reset 事件








input输入框valueString
输入框的初始内容
typeString"text"input 的类型
passwordBooleanfalse是否是密码类型
placeholderString
输入框为空时占位符
placeholder-styleString
指定 placeholder 的样式
placeholder-classString"input-placeholder"指定 placeholder 的样式类
disabledBooleanfalse是否禁用
maxlengthNumber140最大输入长度,设置为 -1 的时候不限制最大长度
cursor-spacingNumber0指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
auto-focusBooleanfalse(即将废弃,请直接使用 focus )自动聚焦,拉起键盘
focusBooleanfalse获取焦点
confirm-typeString"done"设置键盘右下角按钮的文字1.1.0
confirm-holdBooleanfalse点击键盘右下角按钮时是否保持键盘不收起1.1.0
cursorNumber
指定focus时的光标位置1.5.0
bindinputEventHandle
当键盘输入时,触发input事件,event.detail = {value, cursor},处理函数可以直接 return 一个字符串,将替换输入框的内容。
bindfocusEventHandle
输入框聚焦时触发,event.detail = {value: value}
bindblurEventHandle
输入框失去焦点时触发,event.detail = {value: value}
bindconfirmEventHandle
点击完成按钮时触发,event.detail = {value: value}
checkbox多项选择器valueString
<checkbox/>标识,选中时触发<checkbox-group/>的 change 事件,并携带 <checkbox/> 的 value
disabledBooleanfalse是否禁用
checkedBooleanfalse当前是否选中,可用来设置默认选中
colorColor
checkbox的颜色,同css的color
radio单项选择器valueString
<radio/> 标识。当该<radio/> 选中时,<radio-group/> 的 change 事件会携带<radio/>的value
disabledBooleanfalse是否禁用
checkedBooleanfalse当前是否选中,可用来设置默认选中
colorColor
radio的颜色,同css的color
picker
(mode = selector)
(普通)列表选择器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是否禁用








picker
(mode = multiSelector)
(多列)列表选择器range二维Array / 二维Object Array[]mode为 selector 或 multiSelector 时,range 有效。二维数组,长度表示多少列,数组的每项表示每列的数据,如[["a","b"], ["c","d"]]
range-keyString
当 range 是一个 二维Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
valueArray0value 每一项的值表示选择了 range 对应项中的第几个(下标从 0 开始)
bindchangeEventHandle
value 改变时触发 change 事件,event.detail = {value: value}
bindcolumnchangeEventHandle
某一列的值改变时触发 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改变了第几列(下标从0开始),value 的值表示变更值的下标
disabledBooleanfalse是否禁用
picker
(mode = time)
(时间)列表选择器valueString
表示选中的时间,格式为"hh:mm"
startString
表示有效时间范围的开始,字符串格式为"hh:mm"
endString
表示有效时间范围的结束,字符串格式为"hh:mm"
bindchangeEventHandle
value 改变时触发 change 事件,event.detail = {value: value}
disabledBooleanfalse是否禁用








picker
(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}
disabledBooleanfalse是否禁用
picker
(mode = region)
(日期)列表选择器valueArray[]表示选中的省市区,默认选中每一列的第一个值
custom-itemString
可为每一列的顶部添加一个自定义的项1.5.0
bindchangeEventHandle
value 改变时触发 change 事件,event.detail = {value: value}
disabledBooleanfalse是否禁用
picker-view内嵌列表选择器valueNumberArray
数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项(下标从 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 开始)
slider滚动选择器minNumber0最小值
maxNumber100最大值
stepNumber0步长,取值必须大于 0,并且可被(max - min)整除
disabledBooleanfalse是否禁用
valueNumber0当前取值
colorColor#e9e9e9背景条的颜色(请使用 backgroundColor)
selected-colorColor#1aad19已选择的颜色(请使用 activeColor)
activeColorColor#1aad19已选择的颜色
backgroundColorColor#e9e9e9背景条的颜色
show-valueBooleanfalse是否显示当前 value
bindchangeEventHandle
完成一次拖动后触发的事件,event.detail = {value: value}
bindchangingEventHandle
拖动过程中触发的事件,event.detail = {value: value}1.7.0
switch开关选择器checkedBooleanfalse是否选中
typeStringswitch样式,有效值:switch, checkbox
bindchangeEventHandle
checked 改变时触发 change 事件,event.detail={ value:checked}
colorColor
switch 的颜色,同 css 的 color
label标签forString
绑定控件的 id

导航(Navigation):

组件名注释组件属性
属性名类型默认值说明最低版本
navigator应用链接urlString
应用内的跳转链接
open-typeStringnavigate跳转方式
deltaNumber
当 open-type 为 'navigateBack' 时有效,表示回退的层数
hover-classStringnavigator-hover指定点击时的样式类,当hover-class="none"时,没有点击态效果
hover-stop-propagationBooleanfalse指定是否阻止本节点的祖先节点出现点击态1.5.0
hover-start-timeNumber50按住后多久出现点击态,单位毫秒
hover-stay-timeNumber600手指松开后点击态保留时间,单位毫秒

其中open-type 的有效值如下:

说明最低版本
navigate对应 wx.navigateTo 的功能
redirect对应 wx.redirectTo 的功能
switchTab对应 wx.switchTab 的功能
reLaunch对应 wx.reLaunch 的功能1.1.0
navigateBack对应 wx.navigateBack 的功能1.1.0

多媒体(Media):

组件名注释组件属性
属性名类型默认值说明最低版本
audio音频idString
audio 组件的唯一标识符
srcString
要播放音频的资源地址
loopBooleanfalse是否循环播放
controlsBooleanfalse是否显示默认控件
posterString
默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效
nameString未知音频默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效
authorString未知作者默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效
binderrorEventHandle
当发生错误时触发 error 事件,detail = {errMsg: MediaError.code}
bindplayEventHandle
当开始/继续播放时触发play事件
bindpauseEventHandle
当暂停播放时触发 pause 事件
bindtimeupdateEventHandle
当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration}
bindendedEventHandle
当播放到末尾时触发 ended 事件
image图片srcString
图片资源地址
modeString'scaleToFill'图片裁剪、缩放的模式
lazy-loadBooleanfalse图片懒加载。只针对page与scroll-view下的image有效1.5.0
binderrorHandleEvent
当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'}
bindloadHandleEvent
当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}







video视频srcString
要播放视频的资源地址
initial-timeNumber
指定视频初始播放位置1.6.0
durationNumber
指定视频时长1.1.0
controlsBooleantrue是否显示默认播放控件(播放/暂停按钮、播放进度、时间)
danmu-listObject Array
弹幕列表
danmu-btnBooleanfalse是否显示弹幕按钮,只在初始化时有效,不能动态变更
enable-danmuBooleanfalse是否展示弹幕,只在初始化时有效,不能动态变更
autoplayBooleanfalse是否自动播放
loopBooleanfalse是否循环播放1.4.0
mutedBooleanfalse是否静音播放1.4.0
page-gestureBooleanfalse在非全屏模式下,是否开启亮度与音量调节手势1.6.0
directionNumber
设置全屏时视频的方向,不指定则根据宽高比自动判断。有效值为 0(正常竖向), 90(屏幕逆时针90度), -90(屏幕顺时针90度)1.7.0
bindplayEventHandle
当开始/继续播放时触发play事件
bindpauseEventHandle
当暂停播放时触发 pause 事件
bindendedEventHandle
当播放到末尾时触发 ended 事件
bindtimeupdateEventHandle
播放进度变化时触发,event.detail = {currentTime, duration} 。触发频率 250ms 一次
bindfullscreenchangeEventHandle
当视频进入和退出全屏是触发,event.detail = {fullScreen, direction},direction取为 vertical 或 horizontal1.4.0
objectFitStringcontain当视频大小与 video 容器大小不一致时,视频的表现形式。contain:包含,fill:填充,cover:覆盖
posterString
视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 poster 无效

地图(Map):

组件名注释组件属性
属性名类型默认值说明最低版本
map地图longitudeNumber
中心经度
latitudeNumber
中心纬度
scaleNumber16缩放级别,取值范围为5-18
markersArray
标记点
coversArray
即将移除,请使用 markers
polylineArray
路线
circlesArray

controlsArray
控件
include-pointsArray
缩放视野以包含所有给定的坐标点
show-locationBoolean
显示带有方向的当前定位点
bindmarkertapEventHandle
点击标记点时触发
bindcallouttapEventHandle
点击标记点对应的气泡时触发1.2.0
bindcontroltapEventHandle
点击控件时触发
bindregionchangeEventHandle
视野发生变化时触发
bindtapEventHandle
点击地图时触发
bindupdatedEventHandle
在地图渲染更新完成时触发1.6.0

画布(Canvas):

组件名注释组件属性
属性名类型默认值说明最低版本
canvas画布srcString
要播放视频的资源地址
initial-timeNumber
指定视频初始播放位置1.6.0
durationNumber
指定视频时长1.1.0
controlsBooleantrue是否显示默认播放控件(播放/暂停按钮、播放进度、时间)
danmu-listObject Array
弹幕列表
danmu-btnBooleanfalse是否显示弹幕按钮,只在初始化时有效,不能动态变更
enable-danmuBooleanfalse是否展示弹幕,只在初始化时有效,不能动态变更
autoplayBooleanfalse是否自动播放
loopBooleanfalse是否循环播放1.4.0
mutedBooleanfalse是否静音播放1.4.0
page-gestureBooleanfalse在非全屏模式下,是否开启亮度与音量调节手势1.6.0
directionNumber
设置全屏时视频的方向,不指定则根据宽高比自动判断。有效值为 0(正常竖向), 90(屏幕逆时针90度), -90(屏幕顺时针90度)1.7.0
show-progressBooleantrue若不设置,宽度大于240时才会显示1.9.0
show-fullscreen-btnBooleantrue是否显示全屏按钮1.9.0
show-play-btnBooleantrue是否显示视频底部控制栏的播放按钮1.9.0
show-center-play-btnBooleantrue是否显示视频中间的播放按钮1.9.0
enable-progress-gestureBooleantrue是否开启控制进度的手势1.9.0
bindplayEventHandle
当开始/继续播放时触发play事件
bindpauseEventHandle
当暂停播放时触发 pause 事件
bindendedEventHandle
当播放到末尾时触发 ended 事件
bindtimeupdateEventHandle
播放进度变化时触发,event.detail = {currentTime, duration} 。触发频率 250ms 一次
bindfullscreenchangeEventHandle
当视频进入和退出全屏是触发,event.detail = {fullScreen, direction},direction取为 vertical 或 horizontal1.4.0
objectFitStringcontain当视频大小与 video 容器大小不一致时,视频的表现形式。contain:包含,fill:填充,cover:覆盖
posterString
视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 poster 无效


最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com