滚动容器
适用场景#
当组件元素内容长度大于滚动容器时，滚动容器会出滚动条用来对页面内容进行滑动展示。
使用说明#
滚动容器可以实现页面或功能模块的滚动效果，当滚动容器内组件内容占用的总宽度/高度大于滚动容器本身的宽度/高度时，便会出现滚动条，通过滑动滚动条滑动来查看容器内的全部内容，示例如下:
- 拖入一个滚动容器组件，将高度设置为 300
- 在滚动容器中添加三个图片组件，每个图片组件的高度设为 200，这样容器内的组件高度便大于了容器本身的高度，滚动条出现。
属性介绍#
组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 属性分组 | 默认值 | 说明 |
|---|
| 滚动条显隐控制(小程序) | showScrollbar | boolean | 基础属性 | true | 控制滚动条是否显示/隐藏 |
| 允许横向滚动 | scrollX | boolean | 基础属性 | false | 开启后，将开启横向滚动条，组件支持左右滚动 |
| 允许纵向滚动 | scrollY | boolean | 基础属性 | true | 开启后，将开启纵向滚动条，组件支持上下滚动 |
| 滚到的元素ID | scrollIntoView | string | 高级属性 | - | 将当前的元素滚动到浏览器窗口的可视区域内 |
| 横向滚动条位置 | scrollLeft | number | 高级属性 | - | 输入默认值，横向滚动条将默认移动到该位置 |
| 竖向滚动条位置 | scrollTop | number | 高级属性 | - | 输入默认值，竖向滚动条将默认移动到该位置 |
| 距底部/右边多远时，触发scrolltolower事件 | lowerThreshold | number | 高级属性 | 50 | - |
| 距顶部/左边多远时，触发scrolltoupper事件 | upperThreshold | number | 高级属性 | 50 | - |
| 启用 scroll-view 增强特性(小程序) | enhanced | boolean | 高级属性 | false | 开启scroll-view增强特性 |
| iOS 下 scroll-view 边界弹性控制(小程序) | bounces | boolean | 高级属性 | true | - |
| 分页滑动效果(小程序) | pagingEnabled | boolean | 高级属性 | false | - |
| 滑动减速速率控制(小程序) | fastDeceleration | boolean | 高级属性 | false | - |
| 开启自定义下拉刷新(小程序) | refresherEnabled | boolean | 高级属性 | false | 开启后可自定义对下拉刷新进行相关配置 |
| 设置自定义下拉刷新阈值(小程序) | refresherThreshold | number | 高级属性 | 50 | - |
| 设置自定义下拉刷新默认样式(小程序) | refresherDefaultStyle | {"label":"black","value":"black"}|{"label":"white","value":"white"}|{"label":"none","value":"none"} | 高级属性 | "block" | - |
| 设置自定义下拉刷新区域背景颜色(小程序) | refresherBackground | string | 高级属性 | "#fff" | - |
| 设置当前下拉刷新状态(小程序) | refresherTriggered | boolean | 高级属性 | false | - |
| 开启 scroll anchoring 特性(小程序) | scrollAnchoring | boolean | 高级属性 | false | 开启scroll-anchoring特性 |
| 启用 flexbox 布局(小程序) | enableFlex | boolean | 高级属性 | false | 开启flexbox布局 |
| iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向(小程序) | enableBackToTop | boolean | 高级属性 | false | 开启后当执行对应操作后滚动条将自动返回顶部 |
| 在设置滚动条位置时使用动画过渡(小程序) | scrollWithAnimation | boolean | 高级属性 | false | 开启滚动条动画 |
事件介绍#
组件暴露的事件，可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
|---|
| 滚动时触发 | scroll | 兼容三端 | - | |
| 滚动到底部/右边时触发 | scrolltolower | 兼容三端 | - | |
| 滚动到顶部/左边时触发 | scrolltoupper | 兼容三端 | - | |
| 滑动开始事件(同时开启 enhanced 属性后生效) | dragstart | 兼容三端 | - | |
| 滑动事件(同时开启 enhanced 属性后生效) | dragging | 兼容三端 | - | |
| 滑动结束事件(同时开启 enhanced 属性后生效) | dragend | 兼容三端 | - | |
| 自定义下拉刷新控件被下拉 | refresherpulling | 兼容三端 | - | |
| 自定义下拉刷新被触发 | refresherrefresh | 兼容三端 | - | |
| 自定义下拉刷新被复位 | refresherrestore | 兼容三端 | - | |
| 自定义下拉刷新被中止 | refresherabort | 兼容三端 | - |