小程序组件

目录

1 基础组件

text

rich-text

nodes

icon

progress

2 视图组件

cover-image

cover-view

mavable-area

movable-view

scroll-view

swiper

swiper-item

view

3 表单组件

button

checkbox

checkbox-group

form

input

label

picker

picker-view

radio

radio-group

slider

swith

textarea

5 导航组件

functional-page-navigator

navigator

6 媒体组件

audio

camera

image

live-player

live-pusher

video

7 地图组件

map

8 画布组件

canvas

---

1 基础组件

text

文本。

属性	类型	默认值	必填	说明
selectable	boolean	false	否	文本是否可选
space	string		否	显示连续空格
decode	boolean	false	否	是否解码

space 的合法值

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

rich-text

富文本。

属性	类型	默认值	必填	说明
nodes	array/string	[]	否	节点列表/HTML String
space	string		否	显示连续空格

space 的合法值

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

nodes

现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点 元素节点：type = node*

属性	说明	类型	必填	备注
name	标签名	string	是	支持部分受信任的 HTML 节点
attrs	属性	object	否	支持部分受信任的属性，遵循 Pascal 命名法
children	子节点列表	array	否	结构和 nodes 一致

文本节点：type = text*

属性	说明	类型	必填	备注
text	文本	string	是	支持entities

icon

图标，组件属性的长度单位默认为px。

属性	类型	默认值	必填	说明
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	number/string	23	否	icon的大小
color	string		否	icon的颜色，同css的color

progress

进度条，组件属性的长度单位默认为px。

属性	类型	默认值	必填	说明
percent	number		否	百分比0~100
show-info	boolean	false	否	在进度条右侧显示百分比
border-radius	number/string	0	否	圆角大小
font-size	number/string	16	否	右侧百分比字体大小
stroke-width	number/string	6	否	进度条线的宽度
color	string	#09BB07	否	进度条颜色（请使用activeColor）
activeColor	string	#09BB07	否	已选择的进度条的颜色
backgroundColor	string	#EBEBEB	否	未选择的进度条的颜色
active	boolean	false	否	进度条从左往右的动画
active-mode	string	backwards	否	backwards: 动画从头播；forwards：动画从上次结束点接着播
bindactiveend	eventhandle		否	动画完成事件

2 视图组件

cover-image

覆盖在原生组件之上的图片视图，可覆盖的原生组件同<cover-view>，支持嵌套在<cover-view>里。

属性	类型	默认值	必填	说明
src	string		否	图标路径，支持临时路径、网络地址（1.6.0起支持）、云文件ID（2.2.3起支持）。暂不支持base64格式。
bindload	eventhandle		否	图片加载成功时触发
binderror	eventhandle		否	图片加载失败时触发

cover-view

覆盖在原生组件之上的文本视图。

可覆盖的原生组件包括 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 成为滚动元素后生效

mavable-area

<movable-view>的可移动区域。

属性	类型	默认值	必填	说明
scale-area	Boolean	false	否	当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area

movable-view

可移动的视图容器，在页面中可以拖拽滑动。<movable-view>必须在 <movable-area> 组件中，并且必须是直接子节点，否则不能移动。

属性	类型	默认值	必填	说明
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，否则会被设置成默认值
disabled	boolean	false	否	是否禁用
scale	boolean	false	否	是否支持双指缩放，默认缩放手势生效区域是在movable-view内
scale-min	number	0.5	否	定义缩放倍数最小值
scale-max	number	10	否	定义缩放倍数最大值
scale-value	number	1	否	定义缩放倍数，取值范围为 0.5 - 10
animation	boolean	true	否	是否使用动画
bindchange	eventhandle		否	拖动过程中触发的事件，event.detail = {x, y, source}
bindscale	eventhandle		否	缩放过程中触发的事件，event.detail = {x, y, scale}，x和y字段在2.1.0之后支持
htouchmove	eventhandle		否	初次手指触摸后移动为横向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch
vtouchmove	eventhandle		否	初次手指触摸后移动为纵向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch

bindchange 返回的 source 表示产生移动的原因

值	说明
touch	拖动
touch-out-of-bounds	超出移动范围
out-of-bounds	超出移动范围后的回弹
friction	惯性
空字符串	setData

scroll-view

可滚动视图区域。使用竖向滚动时，需要给<scroll-view>一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px。

属性	类型	默认值	必填	说明
scroll-x	boolean	false	否	允许横向滚动
scroll-y	boolean	false	否	允许纵向滚动
upper-threshold	number/string	50	否	距顶部/左边多远时，触发 scrolltoupper 事件
lower-threshold	number/string	50	否	距底部/右边多远时，触发 scrolltolower 事件
scroll-top	number/string		否	设置竖向滚动条位置
scroll-left	number/string		否	设置横向滚动条位置
scroll-into-view	string		否	值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	boolean	false	否	在设置滚动条位置时使用动画过渡
enable-back-to-top	boolean	false	否	iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
bindscrolltoupper	eventhandle		否	滚动到顶部/左边时触发
bindscrolltolower	eventhandle		否	滚动到底部/右边时触发
bindscroll	eventhandle		否	滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

swiper

滑块视图容器。其中只可放置<swiper-item>组件，否则会导致未定义的行为。

属性	类型	默认值	必填	说明
indicator-dots	boolean	false	否	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色
indicator-active-color	color	#000000	否	当前选中的指示点颜色
autoplay	boolean	false	否	是否自动切换
current	number	0	否	当前所在滑块的 index
interval	number	5000	否	自动切换时间间隔
duration	number	500	否	滑动动画时长
circular	boolean	false	否	是否采用衔接滑动
vertical	boolean	false	否	滑动方向是否为纵向
previous-margin	string	"0px"	否	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-margin	string	"0px"	否	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
display-multiple-items	number	1	否	同时显示的滑块数量
skip-hidden-item-layout	boolean	false	否	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
easing-function	string	"default"	否	指定 swiper 切换缓动动画类型
bindchange	eventhandle		否	current 改变时会触发 change 事件，event.detail = {current, source}
bindtransition	eventhandle		否	swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}
bindanimationfinish	eventhandle		否	动画结束时会触发 animationfinish 事件，event.detail 同上

easing-function 的合法值

值	说明
default	默认缓动函数
linear	线性动画
easeInCubic	缓入动画
easeOutCubic	缓出动画
easeInOutCubic	缓入缓出动画

swiper-item

仅可放置在<swiper>组件中，宽高自动设置为100%。

属性