# 视图容器

# 视图容器说明

组件 说明 最低版本
view 视图容器 1.0.0
scroll-view 可滚动视图区域 1.0.0
web-view webview视图 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 false 距底部/右边多远时,触发 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 增强特性 不支持
bounces boolean false iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效) 不支持
show-scrollbar boolean true 滚动条显隐控制 (同时开启 enhanced 属性后生效) 不支持
paging-enabled boolean false 分页滑动效果 (同时开启 enhanced 属性后生效) 不支持
fast-deceleration boolean false 滑动减速速率控制 (同时开启 enhanced 属性后生效) 不支持
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
© 2021 凡泰极客
  • 免费试用
  • 编组
  • 编组 2