ToB企服应用市场:ToB评测及商务社交产业平台

标题: 鸿蒙OpenHarmony【Scroll】ArkTS滚动与滑动 [打印本页]

---

作者: 梦见你的名字    时间: 2024-12-18 00:48
标题: 鸿蒙OpenHarmony【Scroll】ArkTS滚动与滑动
子组件

支持单个子组件。
接口

Scroll(scroller?: Scroller)
元服务API： 从API version 11开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析scroller[Scroller]否可滚动组件的控制器。用于与可滚动组件进行绑定。 属性

除支持[通用属性]和[滚动组件通用属性]外，还支持以下属性：
scrollable

scrollable(value: ScrollDirection)
设置滚动方向。
元服务API： 从API version 11开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析value[ScrollDirection]是滚动方向。默认值：ScrollDirection.Vertical scrollBar

scrollBar(barState: BarState)
设置滚动条状态。如果容器组件无法滚动，则滚动条不显示。如果容器组件的子组件大小为无穷大，则滚动条不支持拖动和伴随滚动。
从API version 10开始，当滚动组件存在圆角时，为克制滚动条被圆角截断，滚动条会自动盘算距顶部和底部的避让间隔。
元服务API： 从API version 11开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析barState[BarState]是滚动条状态。默认值：BarState.Auto scrollBarColor

scrollBarColor(color: Color | number | string)
设置滚动条的颜色。
元服务API： 从API version 11开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析color[Color]numberstring scrollBarWidth

scrollBarWidth(value: number | string)
设置滚动条的宽度，不支持百分比设置。宽度设置后，滚动条正常状态和按压状态宽度均为滚动条的宽度值。如果滚动条的宽度凌驾Scroll组件主轴方向的高度，则滚动条的宽度会变为默认值。
元服务API： 从API version 11开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析valuenumberstring是 scrollSnap10+

scrollSnap(value: ScrollSnapOptions)
设置Scroll组件的限位滚动模式。
元服务API： 从API version 11开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析value[ScrollSnapOptions]是Scroll组件的限位滚动模式。 edgeEffect

edgeEffect(edgeEffect: EdgeEffect, options?: EdgeEffectOptions)
设置边缘滑动效果。
元服务API： 从API version 11开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析edgeEffect[EdgeEffect]是Scroll组件的边缘滑动效果，支持弹簧效果和阴影效果。默认值：EdgeEffect.Noneoptions11+[EdgeEffectOptions]否组件内容大小小于组件自身时，是否开启滑动效果。设置为{ alwaysEnabled: true }会开启滑动效果，{ alwaysEnabled: false }不开启。默认值：{ alwaysEnabled: 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
参数：
参数名类型必填分析value[NestedScrollOptions]是嵌套滚动选项。默认值：{ scrollForward: NestedScrollMode.SELF_ONLY, scrollBackward: NestedScrollMode.SELF_ONLY } friction10+

friction(value: number | Resource)
设置摩擦系数，手动划动滚动区域时生效，只对惯性滚动过程有影响，对惯性滚动过程中的链式效果有间接影响。设置为小于等于0的值时，按默认值处置惩罚
元服务API： 从API version 11开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析valuenumber[Resource]是 enablePaging11+

enablePaging(value: boolean)
设置是否支持划动翻页。如果同时设置了划动翻页enablePaging和限位滚动scrollSnap，则scrollSnap优先生效，enablePaging不生效。
元服务API： 从API version 12开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析valueboolean是是否支持划动翻页。设置为true支持滑动翻页，false不支持。默认值：false initialOffset12+

initialOffset(value: OffsetOptions)
设置初始滚动偏移量。只在首次布局时生效，后续动态修改该属性值不生效。
元服务API： 从API version 12开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析value[OffsetOptions]是当输入的大小为百分比时，初始滚动偏移量为Scroll组件主轴方向大小与百分比数值之积。 ScrollDirection枚举分析

体系本事： SystemCapability.ArkUI.ArkUI.Full
名称描述Horizontal仅支持程度方向滚动。元服务API： 从API version 11开始，该接口支持在元服务中利用。Vertical仅支持竖直方向滚动。元服务API： 从API version 11开始，该接口支持在元服务中利用。None不可滚动。元服务API： 从API version 11开始，该接口支持在元服务中利用。Free(deprecated)支持竖直或程度方向滚动从API version 9开始废弃。 ScrollSnapOptions10+

元服务API： 从API version 11开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
名称类型必填分析snapAlign[ScrollSnapAlign]是设置Scroll组件限位滚动时的对齐方式。**分析：**1.该属性默认值为ScrollSnapAlign.NONE。snapPagination[Dimension]Array否enableSnapToStartboolean否在Scroll组件限位滚动模式下，该属性设置为false后，允许Scroll在开头和第一个限位点间自由滑动。**分析：**1.该属性值默认为true。2.该属性仅当snapPagination属性为Array时生效，不支持Dimension。enableSnapToEndboolean否在Scroll组件限位滚动模式下，该属性设置为false后，允许Scroll在最后一个限位点和末端间自由滑动。**分析：**1.该属性值默认为true。2.该属性仅当snapPagination属性为Array时生效，不支持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。state[ScrollState]是当前滑动状态。 返回值：
类型分析{ offsetRemain: number }现实滑动量，单位vp。 onScroll(deprecated)

onScroll(event: (xOffset: number, yOffset: number) => void)
滚动变乱回调，返回滚动时程度、竖直方向偏移量，单位vp。
触发该变乱的条件 ：
1、滚动组件触发滚动时触发，支持键鼠操作等其他触发滚动的输入设置。
2、通过滚动控制器API接口调用。
3、越界回弹。
从API version12开始废弃不再利用，保举利用[onWillScroll]变乱更换。
元服务API： 从API version 11开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析xOffsetnumber是每帧滚动时程度方向的偏移量，Scroll的内容向左滚动时偏移量为正，向右滚动时偏移量为负。单位vp。yOffsetnumber是每帧滚动时竖直方向的偏移量，Scroll的内容向上滚动时偏移量为正，向下滚动时偏移量为负。单位vp。 onWillScroll12+

onWillScroll(handler: ScrollOnWillScrollCallback)
滚动变乱回调，Scroll滚动前触发。
回调当前帧将要滚动的偏移量和当前滚动状态和滚动操作来源，此中回调的偏移量为盘算得到的将要滚动的偏移量值，并非最终现实滚动偏移。可以通过该回调返回值指定Scroll将要滚动的偏移。
触发该变乱的条件 ：
1、滚动组件触发滚动时触发，支持键鼠操作等其他触发滚动的输入设置。
2、通过滚动控制器API接口调用。
3、越界回弹。
元服务API： 从API version 12开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析handler[ScrollOnWillScrollCallback]是Scroll滚动前触发的回调。 onDidScroll12+

onDidScroll(handler: ScrollOnScrollCallback)
滚动变乱回调，Scroll滚动时触发。
返回当前帧滚动的偏移量和当前滚动状态。
触发该变乱的条件 ：
1、滚动组件触发滚动时触发，支持键鼠操作等其他触发滚动的输入设置。
2、通过滚动控制器API接口调用。
3、越界回弹。
元服务API： 从API version 12开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析handler[ScrollOnScrollCallback]是Scroll滚动时触发的回调 onScrollEdge

onScrollEdge(event: (side: Edge) => void)
滚动到边缘变乱回调。
触发该变乱的条件 ：
1、滚动组件滚动到边缘时触发，支持键鼠操作等其他触发滚动的输入设置。
2、通过滚动控制器API接口调用。
3、越界回弹。
元服务API： 从API version 11开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析side[Edge]是滚动到的边缘位置。 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
ScrollOnScrollCallback12+

type ScrollOnScrollCallback = (xOffset: number, yOffset: number, scrollState: ScrollState) => void
Scroll滚动时触发的回调。
元服务API： 从API version 12开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数名类型必填分析xOffsetnumber是每帧滚动时程度方向的偏移量，Scroll中的内容向左滚动时偏移量为正，向右滚动时偏移量为负。单位vp。yOffsetnumber是每帧滚动时竖直方向的偏移量，Scroll中的内容向上滚动时偏移量为正，向下滚动时偏移量为负。单位vp。scrollState[ScrollState]是当前滚动状态。 分析
若通过onScrollFrameBegin变乱和scrollBy方法实现容器嵌套滚动，需设置子滚动节点的EdgeEffect为None。如Scroll嵌套List滚动时，List组件的edgeEffect属性需设置为EdgeEffect.None。
ScrollOnWillScrollCallback12+

type ScrollOnWillScrollCallback = (xOffset: number, yOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => void | OffsetResult
Scroll滚动前触发的回调。
元服务API： 从API version 12开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数名类型必填分析xOffsetnumber是每帧滚动时程度方向的偏移量，Scroll中的内容向左滚动时偏移量为正，向右滚动时偏移量为负。单位vp。yOffsetnumber是每帧滚动时竖直方向的偏移量，Scroll中的内容向上滚动时偏移量为正，向下滚动时偏移量为负。单位vp。scrollState[ScrollState]是当前滚动状态。scrollSource[ScrollSource]是当前滚动操作的来源。 返回值：
类型分析void[OffsetResult] Scroller

可滚动容器组件的控制器，可以将此组件绑定至容器组件，然后通过它控制容器组件的滚动，同一个控制器不可以控制多个容器组件，目前支持绑定到List、Scroll、ScrollBar、Grid、WaterFlow上。
导入对象

1. scroller: Scroller = new Scroller()

复制代码

constructor

constructor()
Scroller的构造函数。
元服务API： 从API version 11开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
scrollTo

scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?: ScrollAnimationOptions | boolean })
滑动到指定位置。
元服务API： 从API version 11开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析xOffsetnumberstring是yOffsetnumberstring是animation[ScrollAnimationOptions]12+boolean10+否 scrollEdge

scrollEdge(value: Edge, options?: ScrollEdgeOptions)
滚动到容器边缘，不区分滚动轴方向，Edge.Top和Edge.Start表现雷同，Edge.Bottom和Edge.End表现雷同。
Scroll组件默认有动画，Grid、List、WaterFlow组件默认无动画。
元服务API： 从API version 11开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析value[Edge]是滚动到的边缘位置。元服务API： 从API version 11开始，该接口支持在元服务中利用。options12+[ScrollEdgeOptions]否设置滚动到边缘位置的模式。元服务API： 从API version 12开始，该接口支持在元服务中利用。 fling12+

fling(velocity: number): void
滚动类组件开启按传入的初始速率进行惯性滚动。
元服务API： 从API version 12开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析velocitynumber是惯性滚动的初始速率值。单位：vp/s**分析：**velocity值设置为0，视为异常值，本次滚动不生效。如果值为正数，则向下滚动；如果值为负数，则向上滚动。 错误码ID错误信息401Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed.100004Controller not bound to component. scrollPage9+

scrollPage(value: { next: boolean }): void
滚动到下一页或者上一页。
元服务API： 从API version 11开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析nextboolean是是否向下翻页。true表示向下翻页，false表示向上翻页。 scrollPage(deprecated)

scrollPage(value: { next: boolean, direction?: Axis })
滚动到下一页或者上一页。从API version 9开始, 该接口不再维护，保举利用[scrollPage9+]。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析nextboolean是是否向下翻页。true表示向下翻页，false表示向上翻页。direction[Axis]否设置滚动方向为程度或竖直方向。 currentOffset

currentOffset(): OffsetResult
元服务API： 从API version 11开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
类型描述[OffsetResult11+]返回当前的滚动偏移量。**分析：**当scroller控制器未绑定容器组件或者容器组件被异常释放时，currentOffset的返回值为空。 scrollToIndex

scrollToIndex(value: number, smooth?: boolean, align?: ScrollAlign, options?: ScrollToIndexOptions)
滑动到指定Index，支持设置滑动额外偏移量。
开启smooth动效时，会对颠末的所有item进行加载和布局盘算，当大量加载item时会导致性能问题。
分析
仅支持Grid、List、WaterFlow组件。
元服务API： 从API version 11开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析valuenumber是要滑动到的目标元素在当前容器中的索引值。**分析：**value值设置成负值或者大于当前容器子组件的最大索引值，视为异常值，本次跳转不生效。smoothboolean否设置滑动到列表项在列表中的索引值时是否有动效，true表示有动效，false表示没有动效。默认值：false。align[ScrollAlign]否指定滑动到的元素与当前容器的对齐方式。List中的默认值为：ScrollAlign.START。Grid中默认值为：ScrollAlign.AUTO。WaterFlow中的默认值为：ScrollAlign.START。**分析：**仅List、Grid、WaterFlow组件支持该参数。options12+[ScrollToIndexOptions]否设置滑动到指定Index的选项，如额外偏移量。默认值：0，单位：vp。 scrollBy9+

scrollBy(dx: Length, dy: Length)
滑动指定间隔。
分析
支持Scroll、List、Grid、WaterFlow组件。
元服务API： 从API version 11开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析dx[Length]是程度方向滚动间隔，不支持百分比情势。dy[Length]是竖直方向滚动间隔，不支持百分比情势。 isAtEnd10+

isAtEnd(): boolean
查询组件是否滚动到底部。
分析
支持Scroll、List、Grid、WaterFlow组件。
元服务API： 从API version 11开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
返回值
类型描述booleantrue表示组件已经滚动到底部，false表示组件还没滚动到底部。 getItemRect11+

getItemRect(index: number): RectResult
获取子组件的大小及相对容器组件的位置。
分析
支持Scroll、List、Grid、WaterFlow组件。
元服务API： 从API version 12开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析indexnumber是子组件的索引值。 分析

• index必须是当前显示区域显示的子组件的索引值，否则视为非法值。
  
• 非法值返回的大小和位置均为0。
  

返回值：
类型分析[RectResult]子组件的大小和相对于组件的位置。单位：vp。 错误码ID错误信息401Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed.100004Controller not bound to component. OffsetResult11+

元服务API： 从API version 11开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
名称类型只读可选分析xOffsetnumber否否程度滑动偏移。返回值单位为vp。yOffsetnumber否否竖直滑动偏移。返回值单位为vp。 ScrollAnimationOptions12+

元服务API： 从API version 12开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
名称类型必填分析durationnumber否设置滚动时长。默认值：1000。**分析：**设置为小于0的值时，按默认值显示。curve[Curve][ICurve]9+否canOverScrollboolean否设置滚动是否可越界。默认值：false。**分析：**仅在设置为true，且组件的edgeEffect设置为[EdgeEffect.Spring]时，滚动可以或许越界，并在越界时启动回弹动画。 ScrollAlign10+枚举分析

元服务API： 从API version 11开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
名称描述START首部对齐。指定item首部与List首部对齐。CENTER居中对齐。指定item主轴方向居中对齐于List。END尾部对齐。指定item尾部与List尾部对齐。AUTO自动对齐。若指定item完全处于显示区，不做调整。否则依照滑动间隔最短的原则，将指定item首部对齐或尾部对齐于List,使指定item完全处于显示区。 ScrollToIndexOptions12+对象分析

元服务API： 从API version 12开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
名称类型必填分析extraOffset[LengthMetrics]否滑动到指定Index的额外偏移量。 OffsetOptions12+对象分析

元服务API： 从API version 12开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
名称类型必填分析xOffset[Dimension]否程度滑动偏移默认值：0yOffset[Dimension]否垂直滑动偏移默认值：0 ScrollEdgeOptions12+对象分析

元服务API： 从API version 12开始，该接口支持在元服务中利用。
体系本事： SystemCapability.ArkUI.ArkUI.Full
名称类型必填分析velocitynumber否设置滚动到容器边缘的固定速率。如果设置小于等于0的值，参数不生效。默认值：0单位： vp/s 示例

示例1

该示例展示了Scroll组件部分属性和scroller控制器的利用。

1. // xxx.etsimport { curves } from '@kit.ArkUI'@Entry@Componentstruct ScrollExample {  scroller: Scroller = new Scroller()
2.   private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]  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)  }}

复制代码

示例2

该示例利用onScrollFrameBegin变乱实现了内层List组件和外层Scroll组件的嵌套滚动。

1. import { LengthMetrics } from '@kit.ArkUI'
3. @Entry
4. @Component
5. struct NestedScroll {
6.   @State listPosition: number = 0; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。
7.   private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
8.   private scrollerForScroll: Scroller = new Scroller()
9.   private scrollerForList: Scroller = new Scroller()
11.   build() {
12.     Flex() {
13.       Scroll(this.scrollerForScroll) {
14.         Column() {
15.           Text("Scroll Area")
16.             .width("100%")
17.             .height("40%")
18.             .backgroundColor(0X330000FF)
19.             .fontSize(16)
20.             .textAlign(TextAlign.Center)
21.             .onClick(() => {
22.               this.scrollerForList.scrollToIndex(5, false, ScrollAlign.START, { extraOffset: LengthMetrics.vp(5) })
23.             })
25.           List({ space: 20, scroller: this.scrollerForList }) {
26.             ForEach(this.arr, (item: number) => {
27.               ListItem() {
28.                 Text("ListItem" + item)
29.                   .width("100%")
30.                   .height("100%")
31.                   .borderRadius(15)
32.                   .fontSize(16)
33.                   .textAlign(TextAlign.Center)
34.                   .backgroundColor(Color.White)
35.               }.width("100%").height(100)
36.             }, (item: string) => item)
37.           }
38.           .width("100%")
39.           .height("50%")
40.           .edgeEffect(EdgeEffect.None)
41.           .friction(0.6)
42.           .onReachStart(() => {
43.             this.listPosition = 0
44.           })
45.           .onReachEnd(() => {
46.             this.listPosition = 2
47.           })
48.           .onScrollFrameBegin((offset: number) => {
49.             if ((this.listPosition == 0 && offset <= 0) || (this.listPosition == 2 && offset >= 0)) {
50.               this.scrollerForScroll.scrollBy(0, offset)
51.               return { offsetRemain: 0 }
52.             }
53.             this.listPosition = 1
54.             return { offsetRemain: offset };
55.           })
57.           Text("Scroll Area")
58.             .width("100%")
59.             .height("40%")
60.             .backgroundColor(0X330000FF)
61.             .fontSize(16)
62.             .textAlign(TextAlign.Center)
63.         }
64.       }
65.       .width("100%").height("100%")
66.     }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20)
67.   }
68. }

复制代码

示例3

该示例利用nestedScroll属性实现了内层List组件和外层Scroll组件的嵌套滚动。

1. @Entry
2. @Component
3. struct StickyNestedScroll {
4.   @State arr: number[] = []
6.   @Styles
7.   listCard() {
8.     .backgroundColor(Color.White)
9.     .height(72)
10.     .width("100%")
11.     .borderRadius(12)
12.   }
14.   build() {
15.     Scroll() {
16.       Column() {
17.         Text("Scroll Area")
18.           .width("100%")
19.           .height("40%")
20.           .backgroundColor('#0080DC')
21.           .textAlign(TextAlign.Center)
22.         Tabs({ barPosition: BarPosition.Start }) {
23.           TabContent() {
24.             List({ space: 10 }) {
25.               ForEach(this.arr, (item: number) => {
26.                 ListItem() {
27.                   Text("item" + item)
28.                     .fontSize(16)
29.                 }.listCard()
30.               }, (item: string) => item)
31.             }.width("100%")
32.             .edgeEffect(EdgeEffect.Spring)
33.             .nestedScroll({
34.               scrollForward: NestedScrollMode.PARENT_FIRST,
35.               scrollBackward: NestedScrollMode.SELF_FIRST
36.             })
37.           }.tabBar("Tab1")
39.           TabContent() {
40.           }.tabBar("Tab2")
41.         }
42.         .vertical(false)
43.         .height("100%")
44.       }.width("100%")
45.     }
46.     .edgeEffect(EdgeEffect.Spring)
47.     .friction(0.6)
48.     .backgroundColor('#DCDCDC')
49.     .scrollBar(BarState.Off)
50.     .width('100%')
51.     .height('100%')
52.   }
54.   aboutToAppear() {
55.     for (let i = 0; i < 30; i++) {
56.       this.arr.push(i)
57.     }
58.   }
59. }

复制代码

示例4

该示例实现了Scroll组件的限位滚动。

1. @Entry
2. @Component
3. struct Index {
4.   scroller: Scroller = new Scroller;
5.   private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
6.   build() {
7.     Scroll(this.scroller) {
8.       Column() {
9.         ForEach(this.arr, (item: number) => {
10.           Text(item.toString())
11.             .width('90%')
12.             .height(200)
13.             .backgroundColor(0xFFFFFF)
14.             .borderWidth(1)
15.             .borderColor(Color.Black)
16.             .borderRadius(15)
17.             .fontSize(16)
18.             .textAlign(TextAlign.Center)
19.         }, (item: string) => item)
20.       }.width('100%').backgroundColor(0xDCDCDC)
21.     }
22.     .backgroundColor(Color.Yellow)
23.     .height('100%')
24.     .edgeEffect(EdgeEffect.Spring)
25.     .scrollSnap({snapAlign:ScrollSnapAlign.START, snapPagination:400, enableSnapToStart:true, enableSnapToEnd:true})
26.   }
27. }

复制代码

示例5

该示例通过scroller控制器的Fling接口触发Scroll组件的惯性滚动。

1. @Entry
2. @Component
3. //滚动控制器新增按给定速度执行惯性滚动的函数fling
4. struct ListExample {
5.   private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
6.   scrollerForList: Scroller = new Scroller()
7.   build() {
8.     Column() {
9.       Button('Fling-1000')
10.         .height('5%')
11.         .onClick(() => {
12.           this.scrollerForList.fling(-1000)
13.         })
14.       Button('Fling3000')
15.         .height('5%')
16.         .onClick(() => {
17.           this.scrollerForList.fling(3000)
18.         })
19.       List({ space: 20, initialIndex: 0, scroller: this.scrollerForList }) {
20.         ForEach(this.arr, (item: number) => {
21.           ListItem() {
22.             Text('' + item)
23.               .width('100%').height(100).fontSize(16)
24.               .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
25.           }
26.         }, (item: string) => item)
27.       }
28.       .listDirection(Axis.Vertical) // 排列方向
29.       .scrollBar(BarState.Off)
30.       .friction(0.9)
31.       .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
32.       .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
33.       .width('90%')
34.     }
35.     .width('100%')
36.     .height('100%')
37.     .backgroundColor(0xDCDCDC)
38.     .padding({ top: 5 })
39.   }
40. }

复制代码

示例6

该示例实现了按速率700vp/s向Scroll下边缘滚动。

1. // xxx.ets@Entry@Componentstruct ScrollExample {  scroller: Scroller = new Scroller()
2.   private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]  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)  }}

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4