# 视图容器
# 视图容器说明
组件 | 说明 | 最低版本 |
---|---|---|
view | 视图容器 | 1.0.0 |
scroll-view | 可滚动视图区域 | 1.0.0 |
web-view | web-view 视图 | 1.0.0 |
swiper | 滑块视图容器 | 1.0.0 |
swiper-item | 仅可放置在swiper组件中 | 1.0.0 |
cover-image | 覆盖在原生组件之上的图片视图 | 2.8.3 |
cover-view | 覆盖在原生组件之上的文本视图 | 2.8.3 |
match-media | media query 匹配检测节点 | 2.9.3 |
movable-area | movable-view的可移动区域 | 2.9.3 |
movable-view | 可移动的视图容器,在页面中可以拖拽滑动 | 2.9.3 |
page-container | 页面容器 | 2.11.3 |
share-element | 共享元素 | 2.11.3 |
# view
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
hover-class | string | none | 否 | 指定按下去的样式类。当 hover-class="none" 时,没有点击态效果 | 2.11.4 |
hover-stop-propagation | boolean | false | 否 | 指定是否阻止本节点的祖先节点出现点击态 | 2.11.4 |
hover-start-time | number | 50 | 否 | 按住后多久出现点击态,单位毫秒 | 2.11.4 |
hover-stay-time | number | 400 | 否 | 手指松开后点击态保留时间,单位毫秒 | 2.11.4 |
# scroll-view
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
scroll-x | boolean | false | 否 | 允许横向滚动 | 1.0.0 |
scroll-y | boolean | false | 否 | 允许纵向滚动 | 1.0.0 |
upper-threshold | number/string | 50 | 否 | 距顶部/左边多远时,触发 scrolltoupper 事件 | 1.0.0 |
lower-threshold | number/string | 50 | 否 | 距底部/右边多远时,触发 scrolltolower 事件 | 1.0.0 |
scroll-top | number/string | 否 | 设置竖向滚动条位置 | 1.0.0 | |
scroll-left | number/string | 否 | 设置横向滚动条位置 | 1.0.0 | |
scroll-into-view | string | 否 | 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素 | 1.0.0 | |
refresher-enabled | boolean | false | 否 | 开启自定义下拉刷新 | |
refresher-threshold | number | 45 | 否 | 设置自定义下拉刷新阈值 | |
refresher-default-style | string | "black" | 否 | 设置自定义下拉刷新默认样式,支持设置 black 、 white 、 none, none 表示不使用默认样式 | |
refresher-background | string | "#FFF" | 否 | 设置自定义下拉刷新区域背景颜色 | |
refresher-triggered | boolean | false | 否 | 设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发 | |
bindscrolltoupper | eventhandle | 否 | 滚动到顶部/左边时触发 | 1.0.0 | |
bindscrolltolower | eventhandle | 否 | 滚动到底部/右边时触发 | 1.0.0 | |
bindscroll | eventhandle | 否 | 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} | 1.0.0 | |
bindrefresherpulling | eventhandle | 否 | 自定义下拉刷新控件被下拉 | ||
bindrefresherrefresh | eventhandle | 否 | 自定义下拉刷新被触发 | ||
bindrefresherrestore | eventhandle | 否 | 自定义下拉刷新被复位 | ||
bindrefresherabort | eventhandle | 否 | 自定义下拉刷新被中止 | ||
scroll-with-animation | boolean | false | 否 | 在设置滚动条位置时使用动画过渡 | |
enable-back-to-top | boolean | false | 否 | iOS点击顶部状态栏、Android 双击标题栏时,滚动条返回顶部,只支持竖向 | 不支持 |
enable-flex | boolean | false | 否 | 启用 flexbox 布局。开启后,当前节点声明了 display: flex 就会成为 flex container,并作用于其孩子节点。 | 不支持 |
scroll-anchoring | boolean | false | 否 | 开启 scroll anchoring 特性,即控制滚动位置不随内容变化而抖动,仅在 iOS 下生效,Android 下可参考 CSS overflow-anchor 属性。 | 不支持 |
enhanced | boolean | false | 否 | 启用 scroll-view 增强特性 | 2.41.11 仅 ios 支持 |
bounces | boolean | false | 否 | iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效), 仅在 ios 16 及以上版本支持 | 2.41.11 仅 ios 支持 |
show-scrollbar | boolean | true | 否 | 滚动条显隐控制 (同时开启 enhanced 属性后生效) | 2.41.11 仅 ios 支持,安卓不展示滚动条 |
paging-enabled | boolean | false | 否 | 分页滑动效果 (同时开启 enhanced 属性后生效) | 2.41.11 仅 ios 支持 |
fast-deceleration | boolean | false | 否 | 滑动减速速率控制 (同时开启 enhanced 属性后生效) | 2.41.11 仅 ios 支持 |
binddragstart | eventhandle | 否 | 滑动开始事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft } | 不支持 | |
binddragging | eventhandle | 否 | 滑动事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft } | 不支持 | |
binddragend | eventhandle | 否 | 滑动结束事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft, velocity } | 不支持 |
# swiper
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
indicator-dots | boolean | false | 否 | 是否显示面板指示点 | 1.0.0 |
indicator-active-color | color | #000000 | 否 | 当前选中的指示点颜色 | 1.0.0 |
autoplay | boolean | false | 否 | 是否自动切换 | 1.0.0 |
current | number | 0 | 否 | 当前所在滑块的 index | 1.0.0 |
interval | number | 5000 | 否 | 自动切换时间间隔 | 1.0.0 |
duration | number | 500 | 否 | 滑动动画时长 | 1.0.0 |
circular | boolean | false | 否 | 是否采用衔接滑动 | 1.0.0 |
vertical | boolean | false | 否 | 滑动方向是否为纵向 | 1.0.0 |
indicator-color | color | rgba(0, 0, 0, .3) | 否 | 指示点颜色 | 2.11.4 |
previous-margin | string | "0px" | 否 | 前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值 | 不支持 |
next-margin | string | "0px" | 否 | 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值 | 不支持 |
snap-to-edge | boolean | false | 否 | 当 swiper-item 的个数大于等于 2,关闭 circular 并且开启 previous-margin 或 next-margin 的时候,可以指定这个边距是否应用到第一个、最后一个元素 | 不支持 |
display-multiple-items | number | 1 | 否 | 同时显示的滑块数量 | 2.11.4 |
easing-function | string | "default" | 否 | 指定 swiper 切换缓动动画类型 | 不支持 |
bindchange | eventhandle | 否 | current 改变时会触发 change 事件,event.detail = {current, source} | 2.11.4 | |
bindtransition | eventhandle | 否 | swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy} | 2.11.4 | |
bindanimationfinish | eventhandle | 否 | 动画结束时会触发 animationfinish 事件,event.detail 同上 | 2.11.4 |
# swiper-item
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
item-id | string | 否 | 该 swiper-item 的标识符 | 不支持 | |
skip-hidden-item-layout | boolean | false | 否 | 是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息 | 不支持 |
# cover-image
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
src | string | 否 | 图标路径 | 1.0.0 | |
bindload | eventhandle | 否 | 图片加载成功时触发 | 2.11.4 | |
binderror | eventhandle | 否 | 图片加载失败时触发 | 2.11.4 |
# cover-view
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
scroll-top | number/string | 否 | 设置顶部滚动偏移量,仅在设置了 overflow-y: scroll 成为滚动元素后生效 | 2.11.4 |
# match-media
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
min-width | number | 否 | 页面最小宽度( px 为单位) | ||
max-width | number | 否 | 页面最大宽度( px 为单位) | ||
width | number | 否 | 页面宽度( px 为单位) | ||
min-height | number | 否 | 页面最小高度( px 为单位) | ||
max-height | number | 否 | 页面最大高度( px 为单位) | ||
height | number | 否 | 页面高度( px 为单位) | ||
orientation | string | 否 | 屏幕方向( landscape 或 portrait ) |
# movable-area
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
scale-area | Boolean | false | 否 | 当里面的movable-view设置为支持双指缩放时,设置此值可将缩放手势生效区域修改为整个movable-area | 2.11.4 |
# movable-view
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
direction | string | none | 否 | movable-view的移动方向,属性值有all、vertical、horizontal、none | 2.11.4 |
inertia | boolean | false | 否 | movable-view是否带有惯性 | 2.11.4 |
out-of-bounds | boolean | false | 否 | 超过可移动区域后,movable-view是否还可以移动 | 2.11.4 |
x | number | 否 | 定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围;改变x的值会触发动画 | 2.11.4 | |
y | number | 否 | 定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围;改变y的值会触发动画 | 2.11.4 | |
damping | number | 20 | 否 | 阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快 | 2.11.4 |
friction | number | 2 | 否 | 摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值 | 1.2.0 |
disabled | boolean | false | 否 | 是否禁用 | |
scale | boolean | false | 否 | 是否支持双指缩放,默认缩放手势生效区域是在movable-view内 | 2.11.4 |
scale-min | number | 0.5 | 否 | 定义缩放倍数最小值 | 2.11.4 |
scale-max | number | 10 | 否 | 定义缩放倍数最大值 | 2.11.4 |
scale-value | number | 1 | 否 | 定义缩放倍数,取值范围为 0.5 - 10 | 2.11.4 |
animation | boolean | true | 否 | 是否使用动画 | 2.11.4 |
bindchange | eventhandle | 否 | 拖动过程中触发的事件,event.detail = {x, y, source} | 2.11.4 | |
bindscale | eventhandle | 否 | 缩放过程中触发的事件,event.detail = {x, y, scale},x和y字段在2.1.0之后支持 | 2.11.4 | |
htouchmove | eventhandle | 否 | 初次手指触摸后移动为横向的移动时触发,如果catch此事件,则意味着touchmove事件也被catch | 2.11.4 | |
vtouchmove | eventhandle | 否 | 初次手指触摸后移动为纵向的移动时触发,如果catch此事件,则意味着touchmove事件也被catch | 2.11.4 |
# page-container
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
show | boolean | false | 否 | 是否显示容器组件 | 2.11.3 |
duration | number | 300 | 否 | 动画时长,单位毫秒 | 2.11.3 |
z-index | number | 100 | 否 | z-index 层级 | 2.11.3 |
overlay | boolean | true | 否 | 是否显示遮罩层 | 2.11.3 |
position | string | bottom | 否 | 弹出位置,可选值为 top bottom right center | 2.11.3 |
round | boolean | false | 否 | 是否显示圆角 | 2.11.3 |
close-on-slide-down | boolean | false | 否 | 是否在下滑一段距离后关闭 | 2.11.3 |
overlay-style | string | 否 | 自定义遮罩层样式 | 2.11.3 | |
custom-style | string | 否 | 自定义弹出层样式 | 2.11.3 | |
bind:beforeenter | eventhandle | 否 | 进入前触发 | 2.11.3 | |
bind:enter | eventhandle | 否 | 进入中触发 | 2.11.3 | |
bind:afterenter | eventhandle | 否 | 进入后触发 | 2.11.3 | |
bind:beforeleave | eventhandle | 否 | 离开前触发 | 2.11.3 | |
bind:leave | eventhandle | 否 | 离开中触发 | 2.11.3 | |
bind:afterleave | eventhandle | 否 | 离开后触发 | 2.11.3 | |
bind:clickoverlay | eventhandle | 否 | 点击遮罩层时触发 | 2.11.3 |
# share-element
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
key | string | 是 | 映射标记 | 2.11.3 | |
transform | boolean | false | 否 | 是否进行动画 | 2.11.3 |
duration | number | 300 | 否 | 动画时长,单位毫秒 | 2.11.3 |
easing-function | string | ease-out | 否 | css缓动函数 | 2.11.3 |
# root-portal
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
enable | boolean | true | 否 | 是否从页面中脱离出来 | 3.0.14 |