diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/enablePaging.gif b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/enablePaging.gif new file mode 100644 index 0000000000000000000000000000000000000000..c68249e11c1f3bd63d4382c18c9187e17ece4728 Binary files /dev/null and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/enablePaging.gif differ diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-scroll.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-scroll.md index 6fa922d4dd09e4bd6896e6518e7774f19a085416..0aca2c2193ef955ebf07f020fe144d419cc97505 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-scroll.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-scroll.md @@ -165,7 +165,7 @@ nestedScroll(value: NestedScrollOptions) | 参数名 | 类型 | 必填 | 说明 | | ------ | ----------------------------------------------------- | ---- | -------------- | -| value | [NestedScrollOptions](ts-container-scrollable-common.md#nestedscrolloptions10对象说明) | 是 | 嵌套滚动选项。
默认值:{ scrollForward: NestedScrollMode.SELF_ONLY, scrollBackward: NestedScrollMode.SELF_ONLY }| +| value | [NestedScrollOptions](ts-container-scrollable-common.md#nestedscrolloptions10对象说明) | 是 | 嵌套滚动选项。
默认值:{ scrollForward: NestedScrollMode.SELF_ONLY, scrollBackward: NestedScrollMode.SELF_ONLY }
Scroll设置[enablePaging](#enablepaging11)或者[scrollSnap](#scrollsnap10),并同时设置父组件优先的嵌套滚动时,嵌套滚动不生效。| ### friction10+ @@ -375,7 +375,7 @@ onScrollEdge(event: OnScrollEdgeCallback) | 参数名 | 类型 | 必填 | 说明 | | ------ | --------------------------------- | ---- | ------------------ | -| event | [OnScrollEdgeCallback](#onscrolledgecallback18) | 是 | 滚动到的边缘位置。 | +| event | [OnScrollEdgeCallback](#onscrolledgecallback18) | 是 | 滚动到的边缘位置。
当Scroll设置为水平方向滚动时,上报[Edge.Center](ts-appendix-enums.md#edge)表示水平方向起始位置,上报[Edge.Baseline](ts-appendix-enums.md#edge)表示水平方向末尾位置。由于[Edge.Center](ts-appendix-enums.md#edge)和[Edge.Baseline](ts-appendix-enums.md#edge)枚举值已经废弃,推荐使用[onReachStart](ts-container-scrollable-common.md#onreachstart11)、[onReachEnd](ts-container-scrollable-common.md#onreachend11)事件监听是否滚动到边界。 | ### onScrollEnd(deprecated) @@ -472,7 +472,7 @@ Scroll滚动前触发的回调。 | 类型 | 说明 | | ------------------------------------------------------------ | ------------------------------------------------------------ | -| void \| [OffsetResult](#offsetresult11对象说明) | 返回OffsetResult时按照开发者指定的偏移量滚动;不返回时按回调参数(xOffset,yOffset)滚动。 | +| void \| [OffsetResult](#offsetresult11对象说明) | 返回OffsetResult时按照开发者指定的偏移量滚动;不返回时按回调参数(xOffset, yOffset)滚动。 | ## OnScrollEdgeCallback18+ @@ -1454,4 +1454,38 @@ struct ScrollExample { } ``` -![edgeEffect_scroll](figures/edgeEffect_scroll.gif) \ No newline at end of file +![edgeEffect_scroll](figures/edgeEffect_scroll.gif) + +### 示例9(划动翻页效果) + +该示例通过enablePaging接口,实现了Scroll组件划动翻页效果。 + +```ts +// xxx.ets +@Entry +@Component +struct EnablePagingExample { + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] + + build() { + Stack({ alignContent: Alignment.Center }) { + Scroll() { + Column() { + ForEach(this.arr, (item: number) => { + Text(item.toString()) + .width('100%') + .height('100%') + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .backgroundColor(0xFFFFFF) + }, (item: string) => item) + } + }.width('90%').height('90%') + .enablePaging(true) + }.width('100%').height('100%').backgroundColor(0xDCDCDC) + } +} +``` + +![enablePaging](figures/enablePaging.gif) \ No newline at end of file