滚动容器
#
适用场景当组件元素内容长度大于滚动容器时,滚动容器会出滚动条用来对页面内容进行滑动展示。
#
使用说明滚动容器可以实现页面或功能模块的滚动效果,当滚动容器内组件内容占用的总宽度/高度大于滚动容器本身的宽度/高度时,便会出现滚动条,通过滑动滚动条滑动来查看容器内的全部内容,示例如下:
- 拖入一个滚动容器组件,将高度设置为 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 | 兼容三端 | - |