diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/NestedScroll2.gif b/zh-cn/application-dev/reference/arkui-ts/figures/NestedScroll2.gif new file mode 100644 index 0000000000000000000000000000000000000000..fafe05c79f9a23c1e5f3bc3e5a8aa0a43b01648a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/NestedScroll2.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md index 6f71c17b285de768aff6a5b277057a0678519b29..47c99b8b1037e6b1416eef4f9206122538cb8cd1 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md @@ -61,6 +61,7 @@ Grid(scroller?: Scroller) | supportAnimation8+ | boolean | 是否支持动画。当前支持GridItem拖拽动画。
默认值：false | | edgeEffect10+ | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置组件的滑动效果，支持弹簧效果和阴影效果。
默认值：EdgeEffect.None
| | enableScrollInteraction10+ | boolean | 设置是否支持滚动手势，当设置为false时，无法通过手指或者鼠标滚动，但不影响控制器的滚动接口。
默认值：true | +| nestedScroll10+ | [NestedScrollOptions](ts-container-scroll.md#nestedscrolloptions10对象说明) | 嵌套滚动选项。设置向前向后两个方向上的嵌套滚动模式，实现与父组件的滚动联动。 | Grid组件根据rowsTemplate、columnsTemplate属性的设置情况，可分为以下三种布局模式： diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md index 8ccc4e9e1c6fbe3ef0f7a3bc7c9e209826c05b0c..a96fd910c2bdd7692e020f275be8d1f50b344695 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md @@ -64,6 +64,7 @@ List(value?:{space?: number | string, initialIndex?: number, scroller? | alignListItem9+ | [ListItemAlign](#listitemalign9枚举说明) | List交叉轴方向宽度大于ListItem交叉轴宽度 * lanes时，ListItem在List交叉轴方向的布局方式，默认为首部对齐。
默认值：ListItemAlign.Start
该接口支持在ArkTS卡片中使用。 | | sticky9+ | [StickyStyle](#stickystyle9枚举说明) | 配合[ListItemGroup](ts-container-listitemgroup.md)组件使用，设置ListItemGroup中header和footer是否要吸顶或吸底。
默认值：StickyStyle.None
该接口支持在ArkTS卡片中使用。
**说明：**
sticky属性可以设置为 StickyStyle.Header \| StickyStyle.Footer 以同时支持header吸顶和footer吸底。 | | enableScrollInteraction10+ | boolean | 设置是否支持滚动手势，当设置为false时，无法通过手指或者鼠标滚动，但不影响控制器的滚动接口。
默认值：true | +| nestedScroll10+ | [NestedScrollOptions](ts-container-scroll.md#nestedscrolloptions10对象说明) | 嵌套滚动选项。设置向前向后两个方向上的嵌套滚动模式，实现与父组件的滚动联动。 | ## ListItemAlign9+枚举说明 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md index 995050ec79a341b069a523f44b4668f314583ae4..4737d350d770a716a21d3f379f94b5ab604864bd 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md @@ -36,6 +36,7 @@ Scroll(scroller?: Scroller) | scrollBarWidth | string \| number | 设置滚动条的宽度，不支持百分比设置。
默认值：4
单位：vp
**说明：**
如果滚动条的宽度超过其高度，则滚动条的宽度会变为默认值。 | | edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。
默认值：EdgeEffect.None | | enableScrollInteraction10+ | boolean | 设置是否支持滚动手势，当设置为false时，无法通过手指或者鼠标滚动，但不影响控制器的滚动接口。
默认值：true | +| nestedScroll10+ | [NestedScrollOptions](#nestedscrolloptions10对象说明) | 嵌套滚动选项。设置向前向后两个方向上的嵌套滚动模式，实现与父组件的滚动联动。 | ## ScrollDirection枚举说明 | 名称 | 描述 | @@ -54,7 +55,7 @@ Scroll(scroller?: Scroller) | onScrollEdge(event: (side: Edge) => void) | 滚动到边缘事件回调。
触发该事件的条件 ：
1、滚动组件滚动到边缘时触发，支持键鼠操作等其他触发滚动的输入设置。
2、通过滚动控制器API接口调用。
3、越界回弹。 | | onScrollEnd(deprecated) (event: () => void) | 滚动停止事件回调。
该事件从API version 9开始废弃，使用onScrollStop事件替代。
触发该事件的条件 ：
1、滚动组件触发滚动后停止，支持键鼠操作等其他触发滚动的输入设置。
2、通过滚动控制器API接口调用后停止，带过渡动效。 | | onScrollStart9+(event: () => void) | 滚动开始时触发。手指拖动Scroll或拖动Scroll的滚动条触发的滚动开始时，会触发该事件。使用[Scroller](#scroller)滚动控制器触发的带动画的滚动，动画开始时会触发该事件。
触发该事件的条件 ：
1、滚动组件开始滚动时触发，支持键鼠操作等其他触发滚动的输入设置。
2、通过滚动控制器API接口调用后开始，带过渡动效。 | -| onScrollStop9+(event: () => void) | 滚动停止时触发。手拖动Scroll或拖动Scroll的滚动条触发的滚动，手离开屏幕并且滚动停止时会触发该事件。使用[Scroller](#scroller)滚动控制器触发的带动画的滚动，动画停止时会触发该事件。
触发该事件的条件 ：
1、滚动组件触发滚动后停止，支持键鼠操作等其他触发滚动的输入设置。
2、通过滚动控制器API接口调用后开始，带过渡动效，。 | +| onScrollStop9+(event: () => void) | 滚动停止时触发。手拖动Scroll或拖动Scroll的滚动条触发的滚动，手离开屏幕并且滚动停止时会触发该事件。使用[Scroller](#scroller)滚动控制器触发的带动画的滚动，动画停止时会触发该事件。
触发该事件的条件 ：
1、滚动组件触发滚动后停止，支持键鼠操作等其他触发滚动的输入设置。
2、通过滚动控制器API接口调用后开始，带过渡动效。 | > **说明：** > @@ -179,6 +180,20 @@ scrollBy(dx: Length, dy: Length): void | END | 尾部对齐。指定item尾部与List尾部对齐。 | | AUTO | 自动对齐。
若指定item完全处于显示区，不做调整。否则依照滑动距离最短的原则，将指定item首部对齐或尾部对齐于List,使指定item完全处于显示区。| +## NestedScrollOptions10+ 对象说明 +| 名称 | 类型 | 描述 | +| ----- | ------ | ----------------- | +| scrollForward | NestedScrollMode | 可滚动组件往末尾端滚动时的嵌套滚动选项。 | +| scrollBackward | NestedScrollMode | 可滚动组件往起始端滚动时的嵌套滚动选项。 | + +## NestedScrollMode10+ 枚举说明 +| 名称 | 描述 | +| ------ | ------------------------------ | +| SELF_ONLY | 只自身滚动，不与父组件联动。 | +| SELF_FIRST | 自身先滚动，自身滚动到边缘以后父组件滚动。父组件滚动到边缘以后，如果父组件有边缘效果，则父组件触发边缘效果，否则子组件触发边缘效果。 | +| PARENT_FIRST | 父组件先滚动，父组件滚动到边缘以后自身滚动。自身滚动到边缘后，人工有边缘效果，会触发自身的边缘效果，否则触发父组件的边缘效果。 | +| PARALLEL | 自身和父组件同时滚动，自身和父组件都到达边缘以后，如果自身有边缘效果，则自身触发边缘效果，否则父组件触发边缘效果。| + ## 示例 ### 示例1 @@ -312,3 +327,63 @@ struct NestedScroll { ``` ![NestedScroll](figures/NestedScroll.gif) + +### 示例3 +```ts +@Entry +@Component +struct StickyNestedScroll { + @State message: string = 'Hello World' + @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) => { + ListItem() { + Text("item" + item) + .fontSize(16) + }.listCard() + }, item => 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) + .backgroundColor('#DCDCDC') + .scrollBar(BarState.Off) + .width('100%') + .height('100%') + } + aboutToAppear() { + for (let i = 0; i < 30; i++) { + this.arr.push(i) + } + } +} +``` +![NestedScroll2](figures/NestedScroll2.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-waterflow.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-waterflow.md index cdc357338402d074de4022d1ede276fb245c2ecc..44eee494b578a758534e42db3bb2eee4d1499ce3 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-waterflow.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-waterflow.md @@ -45,6 +45,7 @@ WaterFlow(options?: {footer?: CustomBuilder, scroller?: Scroller}) | rowsGap | Length |设置行与行的间距。
默认值：0| | layoutDirection | [FlexDirection](ts-appendix-enums.md#flexdirection) |设置布局的主轴方向。
默认值：FlexDirection.Column| | enableScrollInteraction10+ | boolean | 设置是否支持滚动手势，当设置为false时，无法通过手指或者鼠标滚动，但不影响控制器的滚动接口。
默认值：true | +| nestedScroll10+ | [NestedScrollOptions](ts-container-scroll.md#nestedscrolloptions10对象说明) | 嵌套滚动选项。设置向前向后两个方向上的嵌套滚动模式，实现与父组件的滚动联动。 | layoutDirection优先级高于rowsTemplate和columnsTemplate。根据layoutDirection设置情况，分为以下三种设置模式: