目录
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%。
属性 |
---|