Scroller(滚动容器)

大约 5 分钟

Scroller(滚动容器)

用于展示不确定高度的内容,可以将一系列不确定高度的子组件装到一个确定高度的容器中,使用者可通过上下或左右滚动操作查看组件宽高之外的内容。

组件使用范例open in new window

属性

除了支持所有基础属性,还支持以下属性:

scrollEnable

是否允许滑动内容

参数描述类型
scrollEnable是否允许滑动内容,默认trueBoolean

bouncesEnable H5实现中 微信小程序实现中

是否开启回弹效果

参数描述类型
bouncesEnable是否开启回弹效果,默认 trueBoolean

showScrollerIndicator

是否显示滚动条

参数描述类型
showScrollerIndicator是否显示滚动条,默认 trueBoolean

flexDirection

指定排版方向

参数描述类型
flexDirection指定排版方向,FlexDirection.COLUMN为垂直方向,FlexDirection.Row为水平方向,默认为垂直方向FlexDirection

pagingEnable

是否开启分页

参数描述类型
pagingEnable是否开启分页Boolean

nestedScroll

设置子滚动容器的嵌套滚动模式,用于控制父子滚动容器之间的滚动行为

参数描述类型
forward向前滚动(向上/向左)时的嵌套滚动模式KRNestedScrollMode
backward向后滚动(向下/向右)时的嵌套滚动模式KRNestedScrollMode

KRNestedScrollMode 枚举值:

描述
SELF_ONLY仅当前控件处理滚动,不传递给父控件
SELF_FIRST当前控件优先处理滚动,未消费完的滚动量传递给父控件
PARENT_FIRST父控件优先处理滚动,未消费完的滚动量传递给当前控件
用法参考:竖向列表嵌套滚动用法示例open in new window
横向列表嵌套滚动示例open in new window

visibleAreaIgnoreTopMargin

设置计算子组件可见性面积时忽略的顶部距离。用于配合 willAppeardidAppearwillDisappeardidDisappearappearPercentage 等可见性事件使用。

参数描述类型
margin计算可见性时忽略的顶部距离,单位为 dpFloat

visibleAreaIgnoreBottomMargin

设置计算子组件可见性面积时忽略的底部距离。用于配合 willAppeardidAppearwillDisappeardidDisappearappearPercentage 等可见性事件使用。

参数描述类型
margin计算可见性时忽略的底部距离,单位为 dpFloat

使用场景

当滚动容器顶部或底部有固定的遮挡区域(如悬浮导航栏、底部工具栏等)时,可以使用这两个属性来调整可见性计算的有效区域,确保子组件的可见性事件触发更加准确。

visibleAreaIgnoreMargin 使用示例open in new window

事件

除了支持所有基础事件,还支持以下事件:

scroll

监听滚动事件,该方法接收一个闭包回调, 回调中的参数为 ScrollParams

ScrollParams

参数描述类型
offsetX列表当前横轴偏移量Float
offsetY列表当前纵轴偏移量Float
contentWidth列表当前内容总宽度Float
contentHeight列表当前内容总高度Float
viewWidth列表View宽度Float
viewHeight列表View高度Float
isDragging当前是否处于拖拽列表滚动中Boolean

scrollEnd

滚动结束时事件, 该方法接收一个闭包回调, 回调中的参数为 ScrollParams

ScrollParams

参数描述类型
offsetX列表当前横轴偏移量Float
offsetY列表当前纵轴偏移量Float
contentWidth列表当前内容总宽度Float
contentHeight列表当前内容总高度Float
viewWidth列表View宽度Float
viewHeight列表View高度Float
isDragging当前是否处于拖拽列表滚动中Boolean

dragBegin

用户开始拖拽事件, 该方法接收一个闭包回调, 回调中的参数为 ScrollParams

ScrollParams

参数描述类型
offsetX列表当前横轴偏移量Float
offsetY列表当前纵轴偏移量Float
contentWidth列表当前内容总宽度Float
contentHeight列表当前内容总高度Float
viewWidth列表View宽度Float
viewHeight列表View高度Float
isDragging当前是否处于拖拽列表滚动中Boolean

dragEnd

用户停止拖拽事件, 该方法接收一个闭包回调, 回调中的参数为 ScrollParams

ScrollParams

参数描述类型
offsetX列表当前横轴偏移量Float
offsetY列表当前纵轴偏移量Float
contentWidth列表当前内容总宽度Float
contentHeight列表当前内容总高度Float
viewWidth列表View宽度Float
viewHeight列表View高度Float
isDragging当前是否处于拖拽列表滚动中Boolean

scrollToTop

监听系统触发的“回到顶部”事件。仅 iOS 会在点击状态栏时触发,默认会拦截系统自动滚动到顶部的行为,需在回调中自行处理(如调用 setContentOffset)。

参数描述类型
回调无参数-

contentSizeChanged

组件 Size 发生变化事件, 该方法接收一个闭包回调, 回调中的参数如下

参数描述类型
width组件宽度Float
height组件高度Float

方法

setContentOffset

设置Scroller滚动到某个具体坐标偏移值(offset)的位置。

参数描述类型
offsetX滚动到x轴的偏移量Float
offsetY滚动到y轴的偏移量Float
animated滚动到y轴的偏移量, 默认为falseBoolean
springAnimation是否使用spring动画滚动, 默认为nullSpringAnimation

setContentInset

设置Scroller内容边距

参数描述类型
top上边距Float
left左边距Float
bottom下边距Float
right右边距Float
animated滑动过程是否使用动画, 默认falseBoolean

setContentInsetWhenEndDrag

设置 OverScroll 时停留的内容边距

参数描述类型
top上边距Float
left左边距Float
bottom下边距Float
right右边距Float