鸿蒙5.0版开发：ArkTS容器组件（Scroll）
Scroll可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。
说明：
[*]该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
[*]该组件嵌套List子组件滚动时，若List不设置宽高，则默认全部加载，在对性能有要求的场景下建议指定List的宽高。
[*]该组件滚动的条件是主轴方向巨细小于内容巨细。
[*]该组件回弹的条件是要有滚动。内容小于一屏时，没有回弹效果。
子组件
支持单个子组件。
接口
Scroll(scroller?: Scroller)
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
参数：
参数名参数类型必填参数描述scrollerScroller否可滚动组件的控制器。用于与可滚动组件进行绑定。 属性
除支持通用属性外，还支持以部属性：
scrollable
scrollable(value: ScrollDirection)
设置滚动方向。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueScrollDirection是滚动方向。
默认值：ScrollDirection.Vertical scrollBar
scrollBar(barState: BarState)
设置滚动条状态。如果容器组件无法滚动，则滚动条不表现。如果容器组件的子组件巨细为无穷大，则滚动条不支持拖动和伴随滚动。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明barStateBarState是滚动条状态。
默认值：BarState.Auto scrollBarColor
scrollBarColor(color: Color | number | string)
设置滚动条的颜色。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明colorstring | number | Color是滚动条的颜色。
默认值：‘#182431’（40%不透明度） scrollBarWidth
scrollBarWidth(value: number | string)
设置滚动条的宽度，不支持百分比设置。宽度设置后，滚动条正常状态和按压状态宽度均为滚动条的宽度值。如果滚动条的宽度超过Scroll组件主轴方向的高度，则滚动条的宽度会变为默认值。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valuestring | number是滚动条的宽度。
默认值：4
单位：vp scrollSnap10+
scrollSnap(value: ScrollSnapOptions)
设置Scroll组件的限位滚动模式。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueScrollSnapOptions是Scroll组件的限位滚动模式。 edgeEffect
edgeEffect(edgeEffect: EdgeEffect, options?: EdgeEffectOptions)
设置边缘滑动效果。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明edgeEffectEdgeEffect是Scroll组件的边缘滑动效果，支持弹簧效果和阴影效果。
默认值：EdgeEffect.Noneoptions11+EdgeEffectOptions否组件内容巨细小于组件自身时，是否开启滑动效果。
默认值：true enableScrollInteraction10+
enableScrollInteraction(value: boolean)
设置是否支持滚动手势，当设置为false时，无法通过手指或者鼠标滚动，但不影响控制器的滚动接口。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueboolean是是否支持滚动手势。
默认值：true nestedScroll10+
nestedScroll(value: NestedScrollOptions)
设置向前向后两个方向上的嵌套滚动模式，实现与父组件的滚动联动。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueNestedScrollOptions是嵌套滚动选项。 friction10+
friction(value: number | Resource)
设置摩擦系数，手动划动滚动区域时生效，只对惯性滚动过程有影响，对惯性滚动过程中的链式效果有间接影响。设置为小于等于0的值时，按默认值处理
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueResource | number是摩擦系数。
默认值：非可穿戴设备为0.6，可穿戴设备为0.9。
从API version 11开始，非可穿戴设备默认值为0.7。 enablePaging11+
enablePaging(value: boolean)
设置是否支持划动翻页。如果同时设置了划动翻页enablePaging和限位滚动scrollSnap，则scrollSnap优先生效，enablePaging不生效。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueboolean是是否支持划动翻页。
默认值：false flingSpeedLimit11+
flingSpeedLimit(speedLimit: number)
限制跟手滑动竣事后，Fling动效开始时的最大初始速率。单位是vp/s。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明speedLimitnumber是Fling动效开始时的最大初始速率。 initialOffset12+
initialOffset(value: OffsetOptions)
设置初始滚动偏移量。只在首次布局时生效，后续动态修改该属性值不生效。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueOffsetOptions是当输入的巨细为百分比时，初始滚动偏移量为Scroll组件主轴方向巨细与百分比数值之积。 ScrollDirection枚举说明
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
名称描述Horizontal仅支持程度方向滚动。Vertical仅支持竖直方向滚动。None不可滚动。Free(deprecated)支持竖直或程度方向滚动
从API version 9开始废弃 ScrollSnapOptions10+
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
名称参数类型必填描述snapAlignScrollSnapAlign是设置Scroll组件限位滚动时的对齐方式。
说明：
1.该属性默认值为ScrollSnapAlign.NONE。snapPaginationDimension | Array<Dimension>否设置Scroll组件限位滚动时的限位点，限位点即为Scroll组件能滑动停靠的偏移量。
说明：
1.当属性为Dimension时，表示每页的巨细，体系会按照该巨细来自动计算每个限位点的位置：如当Dimension为500时，现实的限位点即为。
2.当属性为Array<Dimension>时，每个Dimension代表限位点的位置。每个Dimension的范围为，0和可滑动距离的底部自动成为限位点。
3.当该属性不填或者Dimension为小于等于0的输入时，按非常值，无穷位滚动处理。当该属性值为Array<Dimension>数组时，数组中的数值必须为单调递增。
4.当输入为百分比时，现实的巨细为Scroll组件的视口与百分比数值之积。enableSnapToStartboolean否在Scroll组件限位滚动模式下，该属性设置为false后，允许Scroll在开头和第一个限位点间自由滑动。
说明：
1.该属性值默认为true。
2.该属性仅当snapPagination属性为Array<Dimension>时生效，不支持Dimension。enableSnapToEndboolean否在Scroll组件限位滚动模式下，该属性设置为false后，允许Scroll在末了一个限位点和末端间自由滑动。
说明：
1.该属性值默认为true。
2.该属性仅当snapPagination属性为Array<Dimension>时生效，不支持Dimension。 变乱
onScrollFrameBegin9+
onScrollFrameBegin(event: (offset: number, state: ScrollState) => { offsetRemain: number; })
每帧开始滚动时触发，变乱参数传入即将发生的滚动量，变乱处理函数中可根据应用场景计算现实必要的滚动量并作为变乱处理函数的返回值返回，Scroll将按照返回值的现实滚动量进行滚动。
支持offsetRemain为负值。
若通过onScrollFrameBegin变乱和scrollBy方法实现容器嵌套滚动，需设置子滚动节点的EdgeEffect为None。如Scroll嵌套List滚动时，List组件的edgeEffect属性需设置为EdgeEffect.None。
触发该变乱的条件：
1、滚动组件触发滚动时触发，包括键鼠操作等其他触发滚动的输入设置。
2、调用控制器接口时不触发。
3、越界回弹不触发。
4、拖动滚动条不触发。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明offsetnumber是即将发生的滑动量，单位vp。stateScrollState是当前滑动状态。 返回值：
类型说明{ offsetRemain: number }现实滑动量，单位vp。 onScroll(deprecated)
onScroll(event: (xOffset: number, yOffset: number) => void)
滚动变乱回调，返回滚动时程度、竖直方向偏移量，单位vp。
触发该变乱的条件 ：
1、滚动组件触发滚动时触发，支持键鼠操作等其他触发滚动的输入设置。
2、通过滚动控制器API接口调用。
3、越界回弹。
从API version12开始废弃不再使用，推荐使用onWillScroll变乱替代。
参数：
参数名类型必填说明xOffsetnumber是每帧滚动时程度方向的偏移量，Scroll的内容向左滚动时偏移量为正，向右滚动时偏移量为负。
单位vp。yOffsetnumber是每帧滚动时竖直方向的偏移量，Scroll的内容向上滚动时偏移量为正，向下滚动时偏移量为负。
单位vp。 onWillScroll12+
onWillScroll(handler: ScrollOnWillScrollCallback)
滚动变乱回调，Scroll滚动前触发。
回调当前帧将要滚动的偏移量和当前滚动状态和滚动操作泉源，其中回调的偏移量为计算得到的将要滚动的偏移量值，并非终极现实滚动偏移。可以通过该回调返回值指定Scroll将要滚动的偏移。
触发该变乱的条件 ：
1、滚动组件触发滚动时触发，支持键鼠操作等其他触发滚动的输入设置。
2、通过滚动控制器API接口调用。
3、越界回弹。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明handlerScrollOnWillScrollCallback是Scroll滚动前触发的回调。 onDidScroll12+
onDidScroll(handler: ScrollOnScrollCallback)
滚动变乱回调，Scroll滚动时触发。
返回当前帧滚动的偏移量和当前滚动状态。
触发该变乱的条件 ：
1、滚动组件触发滚动时触发，支持键鼠操作等其他触发滚动的输入设置。
2、通过滚动控制器API接口调用。
3、越界回弹。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明handlerScrollOnScrollCallback是Scroll滚动时触发的回调 ScrollOnScrollCallback对象说明
Scroll滚动时触发的回调
参数名类型必填说明xOffsetnumber是每帧滚动时程度方向的偏移量，Scroll中的内容向左滚动时偏移量为正，向右滚动时偏移量为负。
单位vp。yOffsetnumber是每帧滚动时竖直方向的偏移量，Scroll中的内容向上滚动时偏移量为正，向下滚动时偏移量为负。
单位vp。scrollStateScrollState是当前滚动状态。 说明：
若通过onScrollFrameBegin变乱和scrollBy方法实现容器嵌套滚动，需设置子滚动节点的EdgeEffect为None。如Scroll嵌套List滚动时，List组件的edgeEffect属性需设置为EdgeEffect.None。
ScrollOnWillScrollCallback12+
type ScrollOnWillScrollCallback = (xOffset: number, yOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => void | OffsetResult
Scroll滚动前触发的回调
参数名类型必填说明xOffsetnumber是每帧滚动时程度方向的偏移量，Scroll中的内容向左滚动时偏移量为正，向右滚动时偏移量为负。
单位vp。yOffsetnumber是每帧滚动时竖直方向的偏移量，Scroll中的内容向上滚动时偏移量为正，向下滚动时偏移量为负。
单位vp。scrollStateScrollState是当前滚动状态。scrollSourceScrollSource是当前滚动操作的泉源。 返回值：
类型说明void | OffsetResult返回OffsetResult时按照开发者指定的偏移量滚动；不返回时按回调参数(xOffset，yOffset)滚动。 onScrollEdge
onScrollEdge(event: (side: Edge) => void)
滚动到边缘变乱回调。
触发该变乱的条件 ：
1、滚动组件滚动到边缘时触发，支持键鼠操作等其他触发滚动的输入设置。
2、通过滚动控制器API接口调用。
3、越界回弹。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明sideEdge是滚动到的边缘位置。 onScrollEnd(deprecated)
onScrollEnd(event: () => void)
滚动停止变乱回调。
触发该变乱的条件 ：
1、滚动组件触发滚动后停止，支持键鼠操作等其他触发滚动的输入设置。
2、通过滚动控制器API接口调用后停止，带过渡动效。
该变乱从API version 9开始废弃，使用onScrollStop变乱替代。
体系能力： SystemCapability.ArkUI.ArkUI.Full
onScrollStart9+
onScrollStart(event: () => void)
滚动开始时触发。手指拖动Scroll或拖动Scroll的滚动条触发的滚动开始时，会触发该变乱。使用Scroller滚动控制器触发的带动画的滚动，动画开始时会触发该变乱。
触发该变乱的条件 ：
1、滚动组件开始滚动时触发，支持键鼠操作等其他触发滚动的输入设置。
2、通过滚动控制器API接口调用后开始，带过渡动效。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
onScrollStop9+
onScrollStop(event: () => void)
滚动停止时触发。手拖动Scroll或拖动Scroll的滚动条触发的滚动，手离开屏幕并且滚动停止时会触发该变乱。使用Scroller滚动控制器触发的带动画的滚动，动画停止时会触发该变乱。
触发该变乱的条件 ：
1、滚动组件触发滚动后停止，支持键鼠操作等其他触发滚动的输入设置。
2、通过滚动控制器API接口调用后开始，带过渡动效。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
onReachStart11+
onReachStart(event: () => void)
Scroll到达起始位置时触发。
Scroll初始化时会触发一次，滚动到起始位置时触发一次。Scroll边缘效果为弹簧效果时，划动经过起始位置时触发一次，回弹回起始位置时再触发一次。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
onReachEnd11+
onReachEnd(event: () => void)
Scroll到达末端位置时触发。
Scroll边缘效果为弹簧效果时，划动经过末端位置时触发一次，回弹回末端位置时再触发一次。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
Scroller
可滚动容器组件的控制器，可以将此组件绑定至容器组件，然后通过它控制容器组件的滚动，同一个控制器不可以控制多个容器组件，目前支持绑定到List、Scroll、ScrollBar、Grid、WaterFlow上。
导入对象
scroller: Scroller = new Scroller()
scrollTo
scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?: { duration?: number, curve?: Curve | ICurve } | boolean })
滑动到指定位置。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
参数：
参数名参数类型必填参数描述xOffsetnumber | string是程度滑动偏移。
说明：
该参数值不支持设置百分比。
当值小于0时，不带动画的滚动，按0处理。带动画的滚动，默认滚动到起始位置后停止，可通过设置animation参数，使滚动在越界时启动回弹动画。
仅滚动轴为x轴时生效。yOffsetnumber | string是垂直滑动偏移。
说明：
该参数值不支持设置百分比。
当值小于0时，不带动画的滚动，按0处理。带动画的滚动，默认滚动到起始位置后停止，可通过设置animation参数，使滚动在越界时启动回弹动画。
仅滚动轴为y轴时生效。animationScrollAnimationOptions12+ | boolean10+否动画设置。
- ScrollAnimationOptions: 自定义滚动动效。
- boolean: 使能默认弹簧动效。
默认值：
ScrollAnimationOptions: { duration: 1000, curve: Curve.Ease, canOverScroll: false }
boolean: false
说明：
当前List、Scroll、Grid、WaterFlow均支持boolean类型和ICurve曲线。
于API12将原来的 {duration?: number, curve?: Curve | ICurve10+ } 抽象为了ScrollAnimationOptions接口，并在其中添加了一个参数canOverScroll。 scrollEdge
scrollEdge(value: Edge, options?: ScrollEdgeOptions)
滚动到容器边缘，不区分滚动轴方向，Edge.Top和Edge.Start体现相同，Edge.Bottom和Edge.End体现相同。 Scroll组件默认有动画，Grid、List、WaterFlow组件默认无动画。
参数：
参数名参数类型必填参数描述valueEdge是滚动到的边缘位置。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。options12+ ScrollEdgeOptions否设置滚动到边缘位置的模式。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。 fling12+
fling(velocity: number)
滚动类组件开启按传入的初始速率进行惯性滚动。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
参数：
参数名参数类型必填参数描述velocitynumber是惯性滚动的初始速率值。单位：vp/s
说明：
velocity值设置为0，视为非常值，本次滚动不生效。如果值为正数，则向下滚动；如果值为负数，则向上滚动。 错误码：
以下错误码详细先容
错误码ID错误信息401Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameter types; 3. Parameter verification failed.100004Controller not bound to component. scrollPage9+
scrollPage(value: { next: boolean }): void
滚动到下一页或者上一页。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
参数：
参数名参数类型必填参数描述nextboolean是是否向下翻页。true表示向下翻页，false表示向上翻页。 scrollPage(deprecated)
scrollPage(value: { next: boolean, direction?: Axis })
滚动到下一页或者上一页。从API version 9开始, 该接口不再维护，推荐使用 scrollPage9+ 。
参数：
参数名参数类型必填参数描述nextboolean是是否向下翻页。true表示向下翻页，false表示向上翻页。directionAxis否设置滚动方向为程度或竖直方向。 currentOffset
currentOffset(): OffsetResult
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
类型描述OffsetResult11+返回当前的滚动偏移量。
说明：
当scroller控制器未绑定容器组件或者容器组件被非常开释时，currentOffset的返回值为空。 scrollToIndex
scrollToIndex(value: number, smooth?: boolean, align?: ScrollAlign, options?: ScrollToIndexOptions)
滑动到指定Index，支持设置滑动额外偏移量。
开启smooth动效时，会对经过的全部item进行加载和布局计算，当大量加载item时会导致性能问题。
说明：
仅支持Grid、List、WaterFlow组件。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
参数：
参数名参数类型必填参数描述valuenumber是要滑动到的目标元素在当前容器中的索引值。
说明：
value值设置成负值或者大于当前容器子组件的最大索引值，视为非常值，本次跳转不生效。smoothboolean否设置滑动到列表项在列表中的索引值时是否有动效，true表示有动效，false表示没有动效。
默认值：false。alignScrollAlign否指定滑动到的元素与当前容器的对齐方式。
List中的默认值为：ScrollAlign.START。Grid中默认值为：ScrollAlign.AUTO。WaterFlow中的默认值为：ScrollAlign.START。
说明：
仅List、Grid、WaterFlow组件支持该参数。options12+ScrollToIndexOptions否设置滑动到指定Index的选项，如额外偏移量。 scrollBy9+
scrollBy(dx: Length, dy: Length)
滑动指定距离。
说明：
支持Scroll、List、Grid、WaterFlow组件。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
参数：
参数名参数类型必填参数描述dxLength是程度方向滚动距离，不支持百分比形式。dyLength是竖直方向滚动距离，不支持百分比形式。 isAtEnd10+
isAtEnd(): boolean
查询组件是否滚动到底部。
说明：
支持Scroll、List、Grid、WaterFlow组件。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
返回值
类型描述booleantrue表示组件已经滚动到底部，false表示组件还没滚动到底部。 getItemRect11+
getItemRect(index: number): RectResult
获取子组件的巨细位置。
说明：
支持Scroll、List、Grid、WaterFlow组件。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
参数：
参数名参数类型必填参数描述indexnumber是子组件的索引值。 说明：
[*]index必须是当前表现区域表现的子组件的索引值，否则视为非法值。
[*]非法值返回的巨细和位置均为0。
返回值：
类型说明RectResult子组件的巨细和相对于组件的位置。
单位：vp。 错误码：
以下错误码详细先容。
错误码ID错误信息401Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameter types; 3. Parameter verification failed.100004Controller not bound to component. OffsetResult11+
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
名称类型描述xOffsetnumber程度滑动偏移;
返回值单位为vp。yOffsetnumber竖直滑动偏移。
返回值单位为vp。 ScrollAnimationOptions12+
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
参数名参数类型必填参数描述durationnumber否设置滚动时长。
默认值：1000。
说明：
设置为小于0的值时，按默认值表现。curveCurve | ICurve10+否设置滚动曲线。
默认值：Curve.Ease。canOverScrollboolean否设置滚动是否可越界。
默认值：false。
说明：
仅在设置为true，且组件的edgeEffect设置为EdgeEffect.Spring时，滚动可以大概越界，并在越界时启动回弹动画。 ScrollAlign10+枚举说明
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
名称描述START首部对齐。指定item首部与List首部对齐。CENTER居中对齐。指定item主轴方向居中对齐于List。END尾部对齐。指定item尾部与List尾部对齐。AUTO自动对齐。
若指定item完全处于表现区，不做调整。否则依照滑动距离最短的原则，将指定item首部对齐或尾部对齐于List,使指定item完全处于表现区。 ScrollToIndexOptions12+对象说明
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
名称类型必填描述extraOffsetLengthMetrics否滑动到指定Index的额外偏移量。 NestedScrollOptions10+对象说明
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
名称类型必填描述scrollForwardNestedScrollMode是可滚动组件往末端端滚动时的嵌套滚动选项。scrollBackwardNestedScrollMode是可滚动组件往起始端滚动时的嵌套滚动选项。 NestedScrollMode10+枚举说明
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
名称描述SELF_ONLY只自身滚动，不与父组件联动。SELF_FIRST自身先滚动，自身滚动到边缘以后父组件滚动。父组件滚动到边缘以后，如果父组件有边缘效果，则父组件触发边缘效果，否则子组件触发边缘效果。PARENT_FIRST父组件先滚动，父组件滚动到边缘以后自身滚动。自身滚动到边缘后，如果有边缘效果，会触发自身的边缘效果，否则触发父组件的边缘效果。PARALLEL自身和父组件同时滚动，自身和父组件都到达边缘以后，如果自身有边缘效果，则自身触发边缘效果，否则父组件触发边缘效果。 EdgeEffectOptions11+对象说明
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
参数名类型必填描述alwaysEnabledboolean是组件内容巨细小于组件自身时，设置是否开启滑动效果 OffsetOptions12+对象说明
参数名类型必填描述xOffsetDimension否程度滑动偏移
默认值：0yOffsetDimension否垂直滑动偏移
默认值：0 ScrollEdgeOptions12+对象说明
参数名参数类型必填参数描述velocitynumber否设置滚动到容器边缘的固定速率。如果设置小于等于0的值，参数不生效。
单位： vp/s 示例
示例1
// xxx.etsimport Curves from '@ohos.curves'@Entry@Componentstruct ScrollExample {scroller: Scroller = new Scroller()
private arr: number[] = build() { Stack({ alignContent: Alignment.TopStart }) { Scroll(this.scroller) { Column() { ForEach(this.arr, (item: number) => { Text(item.toString()) .width('90%') .height(150) .backgroundColor(0xFFFFFF) .borderRadius(15) .fontSize(16) .textAlign(TextAlign.Center) .margin({ top: 10 }) }, (item: string) => item) }.width('100%') } .scrollable(ScrollDirection.Vertical) // 滚动方向纵向 .scrollBar(BarState.On) // 滚动条常驻表现 .scrollBarColor(Color.Gray) // 滚动条颜色 .scrollBarWidth(10) // 滚动条宽度 .friction(0.6) .edgeEffect(EdgeEffect.None) .onWillScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => { console.info(xOffset + ' ' + yOffset) }) .onScrollEdge((side: Edge) => { console.info('To the edge') }) .onScrollStop(() => { console.info('Scroll Stop') }) Button('scroll 150') .height('5%') .onClick(() => { // 点击后下滑指定距离150.0vp this.scroller.scrollBy(0, 150) }) .margin({ top: 10, left: 20 }) Button('scroll 100') .height('5%') .onClick(() => { // 点击后滑动到指定位置，即下滑100.0vp的距离 const yOffset: number = this.scroller.currentOffset().yOffset; this.scroller.scrollTo({ xOffset: 0, yOffset: yOffset + 100 }) }) .margin({ top: 60, left: 20 }) Button('scroll 100') .height('5%') .onClick(() => { // 点击后滑动到指定位置，即下滑100.0vp的距离，滑动过程设置有动画 let curve = Curves.interpolatingSpring(10, 1, 228, 30) //创建一个阶梯曲线 const yOffset: number = this.scroller.currentOffset().yOffset; this.scroller.scrollTo({ xOffset: 0, yOffset: yOffset + 100, animation: { duration: 1000, curve: curve } }) }) .margin({ top: 110, left: 20 }) Button('back top') .height('5%') .onClick(() => { // 点击后回到顶部 this.scroller.scrollEdge(Edge.Top) }) .margin({ top: 160, left: 20 }) Button('next page') .height('5%') .onClick(() => { // 点击后滑到下一页 this.scroller.scrollPage({ next: true }) }) .margin({ top: 210, left: 20 }) }.width('100%').height('100%').backgroundColor(0xDCDCDC)}}ts https://i-blog.csdnimg.cn/direct/a881e4126a034a109fb3814a494b7d43.png
示例2
@Entry
@Component
struct NestedScroll {
@State listPosition: number = 0; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。
private arr: number[] =
private scrollerForScroll: Scroller = new Scroller()
private scrollerForList: Scroller = new Scroller()
build() {
Flex() {
Scroll(this.scrollerForScroll) {
Column() {
Text("Scroll Area")
.width("100%")
.height("40%")
.backgroundColor(0X330000FF)
.fontSize(16)
.textAlign(TextAlign.Center)
.onClick(() => {
this.scrollerForList.scrollToIndex(5)
})
List({ space: 20, scroller: this.scrollerForList }) {
ForEach(this.arr, (item: number) => {
ListItem() {
Text("ListItem" + item)
.width("100%")
.height("100%")
.borderRadius(15)
.fontSize(16)
.textAlign(TextAlign.Center)
.backgroundColor(Color.White)
}.width("100%").height(100)
}, (item: string) => item)
}
.width("100%")
.height("50%")
.edgeEffect(EdgeEffect.None)
.friction(0.6)
.onReachStart(() => {
this.listPosition = 0
})
.onReachEnd(() => {
this.listPosition = 2
})
.onScrollFrameBegin((offset: number) => {
if ((this.listPosition == 0 && offset <= 0) || (this.listPosition == 2 && offset >= 0)) {
this.scrollerForScroll.scrollBy(0, offset)
return { offsetRemain: 0 }
}
this.listPosition = 1
return { offsetRemain: offset };
})
Text("Scroll Area")
.width("100%")
.height("40%")
.backgroundColor(0X330000FF)
.fontSize(16)
.textAlign(TextAlign.Center)
}
}
.width("100%").height("100%")
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20)
}
}
https://i-blog.csdnimg.cn/direct/d25919e99ff741d8b0142f3f2ad2fee2.png
示例3
@Entry
@Component
struct StickyNestedScroll {
@State arr: number[] = []
@Styles
listCard() {
.backgroundColor(Color.White)
.height(72)
.width("100%")
.borderRadius(12)
}
build() {
Scroll() {
Column() {
Text("Scroll Area")
.width("100%")
.height("40%")
.backgroundColor('#0080DC')
.textAlign(TextAlign.Center)
Tabs({ barPosition: BarPosition.Start }) {
TabContent() {
List({ space: 10 }) {
ForEach(this.arr, (item: number) => {
ListItem() {
Text("item" + item)
.fontSize(16)
}.listCard()
}, (item: string) => item)
}.width("100%")
.edgeEffect(EdgeEffect.Spring)
.nestedScroll({
scrollForward: NestedScrollMode.PARENT_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
}.tabBar("Tab1")
TabContent() {
}.tabBar("Tab2")
}
.vertical(false)
.height("100%")
}.width("100%")
}
.edgeEffect(EdgeEffect.Spring)
.friction(0.6)
.backgroundColor('#DCDCDC')
.scrollBar(BarState.Off)
.width('100%')
.height('100%')
}
aboutToAppear() {
for (let i = 0; i < 30; i++) {
this.arr.push(i)
}
}
}
https://i-blog.csdnimg.cn/direct/d3e3b2783dfe45498c390926c9b9d7a3.png
示例4
@Entry
@Component
struct Index {
scroller: Scroller = new Scroller;
private arr: number[] =
build() {
Scroll(this.scroller) {
Column() {
ForEach(this.arr, (item: number) => {
Text(item.toString())
.width('90%')
.height(200)
.backgroundColor(0xFFFFFF)
.borderWidth(1)
.borderColor(Color.Black)
.borderRadius(15)
.fontSize(16)
.textAlign(TextAlign.Center)
}, (item: string) => item)
}.width('100%').backgroundColor(0xDCDCDC)
}
.backgroundColor(Color.Yellow)
.height('100%')
.edgeEffect(EdgeEffect.Spring)
.scrollSnap({snapAlign:ScrollSnapAlign.START, snapPagination:400, enableSnapToStart:true, enableSnapToEnd:true})
}
}
https://i-blog.csdnimg.cn/direct/004e82a7ffc74d7d89aa50c6bf3c5455.png
示例5
@Entry
@Component
//滚动控制器新增按给定速度执行惯性滚动的函数fling
struct ListExample {
private arr: number[] =
scrollerForList: Scroller = new Scroller()
build() {
Column() {
Button('Fling-1000')
.height('5%')
.onClick(() => {
this.scrollerForList.fling(-1000)
})
Button('Fling3000')
.height('5%')
.onClick(() => {
this.scrollerForList.fling(3000)
})
List({ space: 20, initialIndex: 0, scroller: this.scrollerForList }) {
ForEach(this.arr, (item: number) => {
ListItem() {
Text('' + item)
.width('100%').height(100).fontSize(16)
.textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
}
}, (item: string) => item)
}
.listDirection(Axis.Vertical) // 排列方向
.scrollBar(BarState.Off)
.friction(0.9)
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
.edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
.width('90%')
}
.width('100%')
.height('100%')
.backgroundColor(0xDCDCDC)
.padding({ top: 5 })
}
}
https://i-blog.csdnimg.cn/direct/e0e6efc8ef2a461a844037b8305bb24d.png
示例6
该示例实现了按速率700vp/s向Scroll下边缘滚动。
// xxx.etsimport Curves from '@ohos.curves'@Entry@Componentstruct ScrollExample {scroller: Scroller = new Scroller()
private arr: number[] = build() { Stack({ alignContent: Alignment.TopStart }) { Scroll(this.scroller) { Column() { ForEach(this.arr, (item: number) => { Text(item.toString()) .width('90%') .height(150) .backgroundColor(0xFFFFFF) .borderRadius(15) .fontSize(16) .textAlign(TextAlign.Center) .margin({ top: 10 }) }, (item: string) => item) }.width('100%') } .scrollable(ScrollDirection.Vertical) // 滚动方向纵向 .scrollBar(BarState.On) // 滚动条常驻表现 .scrollBarColor(Color.Gray) // 滚动条颜色 .scrollBarWidth(10) // 滚动条宽度 .friction(0.6) .edgeEffect(EdgeEffect.None) .onWillScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => { console.info(xOffset + ' ' + yOffset) }) .onScrollEdge((side: Edge) => { console.info('To the edge') }) .onScrollStop(() => { console.info('Scroll Stop') }) Button('scroll to bottom 700') .height('5%') .onClick(() => { // 点击后滑到下边缘，速率值是700vp/s this.scroller.scrollEdge(Edge.Bottom, { velocity: 700 }) }) .margin({ top: 100, left: 20 }) }.width('100%').height('100%').backgroundColor(0xDCDCDC)}} https://i-blog.csdnimg.cn/direct/0ab8aa9d5f4145e2882f52f512be8229.png
[*]https://i-blog.csdnimg.cn/direct/703087920c1e470298018f36136f0494.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]