跳到主要内容

滚动容器

适用场景#

当组件元素内容长度大于滚动容器时,滚动容器会出滚动条用来对页面内容进行滑动展示。

使用说明#

滚动容器可以实现页面或功能模块的滚动效果,当滚动容器内组件内容占用的总宽度/高度大于滚动容器本身的宽度/高度时,便会出现滚动条,通过滑动滚动条滑动来查看容器内的全部内容,示例如下:

  1. 拖入一个滚动容器组件,将高度设置为 300

  1. 在滚动容器中添加三个图片组件,每个图片组件的高度设为 200,这样容器内的组件高度便大于了容器本身的高度,滚动条出现。

属性介绍#

组件接收的外部传入的属性

属性名
属性标识
类型
属性分组
默认值
说明
滚动条显隐控制(小程序)showScrollbarboolean基础属性true控制滚动条是否显示/隐藏
允许横向滚动scrollXboolean基础属性false开启后,将开启横向滚动条,组件支持左右滚动
允许纵向滚动scrollYboolean基础属性true开启后,将开启纵向滚动条,组件支持上下滚动
滚到的元素IDscrollIntoViewstring高级属性-将当前的元素滚动到浏览器窗口的可视区域内
横向滚动条位置scrollLeftnumber高级属性-输入默认值,横向滚动条将默认移动到该位置
竖向滚动条位置scrollTopnumber高级属性-输入默认值,竖向滚动条将默认移动到该位置
距底部/右边多远时,触发scrolltolower事件lowerThresholdnumber高级属性50-
距顶部/左边多远时,触发scrolltoupper事件upperThresholdnumber高级属性50-
启用 scroll-view 增强特性(小程序)enhancedboolean高级属性false开启scroll-view增强特性
iOS 下 scroll-view 边界弹性控制(小程序)bouncesboolean高级属性true-
分页滑动效果(小程序)pagingEnabledboolean高级属性false-
滑动减速速率控制(小程序)fastDecelerationboolean高级属性false-
开启自定义下拉刷新(小程序)refresherEnabledboolean高级属性false开启后可自定义对下拉刷新进行相关配置
设置自定义下拉刷新阈值(小程序)refresherThresholdnumber高级属性50-
设置自定义下拉刷新默认样式(小程序)refresherDefaultStyle{"label":"black","value":"black"}|{"label":"white","value":"white"}|{"label":"none","value":"none"}高级属性"block"-
设置自定义下拉刷新区域背景颜色(小程序)refresherBackgroundstring高级属性"#fff"-
设置当前下拉刷新状态(小程序)refresherTriggeredboolean高级属性false-
开启 scroll anchoring 特性(小程序)scrollAnchoringboolean高级属性false开启scroll-anchoring特性
启用 flexbox 布局(小程序)enableFlexboolean高级属性false开启flexbox布局
iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向(小程序)enableBackToTopboolean高级属性false开启后当执行对应操作后滚动条将自动返回顶部
在设置滚动条位置时使用动画过渡(小程序)scrollWithAnimationboolean高级属性false开启滚动条动画

事件介绍#

组件暴露的事件,可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
滚动时触发scroll兼容三端-
滚动到底部/右边时触发scrolltolower兼容三端-
滚动到顶部/左边时触发scrolltoupper兼容三端-
滑动开始事件(同时开启 enhanced 属性后生效)dragstart兼容三端-
滑动事件(同时开启 enhanced 属性后生效)dragging兼容三端-
滑动结束事件(同时开启 enhanced 属性后生效)dragend兼容三端-
自定义下拉刷新控件被下拉refresherpulling兼容三端-
自定义下拉刷新被触发refresherrefresh兼容三端-
自定义下拉刷新被复位refresherrestore兼容三端-
自定义下拉刷新被中止refresherabort兼容三端-