视图容器
优质
小牛编辑
129浏览
2023-12-01
视图容器说明
| 组件 | 说明 | 最低版本 |
|---|---|---|
| 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 | 页面容器 | 不支持 |
| share-element | 共享元素 | 不支持 |
view
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| hover-class | string | none | 否 | 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 | 不支持 |
| hover-stop-propagation | boolean | false | 否 | 指定是否阻止本节点的祖先节点出现点击态 | 不支持 |
| hover-start-time | number | 50 | 否 | 按住后多久出现点击态，单位毫秒 | 不支持 |
| hover-stay-time | number | 400 | 否 | 手指松开后点击态保留时间，单位毫秒 | 不支持 |
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) | 否 | 指示点颜色 | 不支持 |
| 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 | 否 | 同时显示的滑块数量 | 不支持 |
| 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 同上 | 不支持 |
swiper-item
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| item-id | string | 否 | 该 swiper-item 的标识符 | 不支持 | |
| skip-hidden-item-layout | boolean | false | 否 | 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 | 不支持 |
cover-image
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| src | string | 否 | 图标路径 | 1.0.0 | |
| bindload | eventhandle | 否 | 图片加载成功时触发 | 不支持 | |
| binderror | eventhandle | 否 | 图片加载失败时触发 | 不支持 |
cover-view
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| scroll-top | number/string | 否 | 设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效 |
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 |
movable-view
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| 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，否则会被设置成默认值 | 1.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 |