diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001232775585.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001232775585.gif new file mode 100644 index 0000000000000000000000000000000000000000..36e5cf928d08d719eab8bb0c417da0bc23472798 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001232775585.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978369.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978369.gif deleted file mode 100644 index 070ae9d042d5211b2ccc6c187ec0f87a90d2c963..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978369.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md b/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md index 962a2de43931dc23157f7d168de50f2843afba06..8411ca984ddf5850abb519cbdcea2113b87a2553 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md @@ -26,9 +26,9 @@ ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: B > **NOTE** > -> The **\** component defines the behavior style of the scrollable area, and its subnodes define the behavior style of the scrollbar. -> -> This component is bound to a scrollable component through **scroller**, and can be used to scroll the scrollable component only when their directions are the same. The **\** component can be bound to only one scrollable component, and vice versa. +> The **\** component defines the behavior style of the scrollable area, and its subnodes define the behavior style of the scrollbar. +> +> This component is bound to a scrollable component through **scroller**, and can be used to scroll the scrollable component only when their directions are the same. The **\** component can be bound to only one scrollable component, and vice versa. ## ScrollBarDirection @@ -46,7 +46,7 @@ ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: B @Component struct ScrollBarExample { private scroller: Scroller = new Scroller() - private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] build() { Column() { @@ -56,8 +56,8 @@ struct ScrollBarExample { ForEach(this.arr, (item) => { Row() { Text(item.toString()) - .width('90%') - .height(100) + .width('80%') + .height(60) .backgroundColor('#3366CC') .borderRadius(15) .fontSize(16) @@ -65,17 +65,18 @@ struct ScrollBarExample { .margin({ top: 5 }) } }, item => item) - }.margin({ right: 52 }) + }.margin({ right: 15 }) } + .width('90%') .scrollBar(BarState.Off) .scrollable(ScrollDirection.Vertical) ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto }) { Text() - .width(30) + .width(20) .height(100) .borderRadius(10) .backgroundColor('#C0C0C0') - }.width(30).backgroundColor('#ededed') + }.width(20).backgroundColor('#ededed') } } } @@ -83,4 +84,4 @@ struct ScrollBarExample { ``` -![en-us_image_0000001256978369](figures/en-us_image_0000001256978369.gif) +![en-us_image_0000001232775585](figures/en-us_image_0000001232775585.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-container-scroll.md b/en/application-dev/reference/arkui-ts/ts-container-scroll.md index 14ed577d91fb25d1a797573dd045a7e2f7c86555..d54ecbf1d4a50be563e2c712648ae0a56dc19daa 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-scroll.md +++ b/en/application-dev/reference/arkui-ts/ts-container-scroll.md @@ -31,9 +31,9 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Type | Description | | -------------- | ---------------------------------------- | --------- | | scrollable | [ScrollDirection](#scrolldirection) | Scroll direction.
Default value: **ScrollDirection.Vertical**| -| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.
Default value: **BarState.Auto**| +| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.
Default value: **BarState.Auto**
**NOTE**
If the container component cannot be scrolled, the scrollbar is not displayed. If the size of a child component of a container component is infinite, the scrollbar cannot be dragged or scrolled with the child component.| | scrollBarColor | string \| number \| [Color](ts-appendix-enums.md#color) | Color of the scrollbar.| -| scrollBarWidth | string \| number | Width of the scrollbar.| +| scrollBarWidth | string \| number | Width of the scrollbar. This attribute cannot be set in percentage.
Default value: **4**
Unit: vp
**NOTE**
If the width of the scrollbar exceeds its height, it will change to the default value.| | edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect. For details, see **EdgeEffect**.
Default value: **EdgeEffect.None**| ## ScrollDirection @@ -42,18 +42,18 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Horizontal | Only horizontal scrolling is supported. | | Vertical | Only vertical scrolling is supported. | | None | Scrolling is disabled. | -| Free(deprecated) | Vertical or horizontal scrolling is supported.
This API is deprecated since API version 9. | +| Free(deprecated) | Vertical or horizontal scrolling is supported.
This API is deprecated since API version 9.| ## Events | Name | Description | | ------------------------------------------------------------ | ------------------------------------------------------------ | -| onScrollFrameBegin9+(event: (offset: number, state: ScrollState) => { offsetRemain }) | Triggered when each frame scrolling starts. The input parameters indicate the amount by which the **\** component will scroll. The event handler then works out the amount by which the component needs to scroll based on the real-world situation and returns the result.
\- **offset**: amount to scroll by.
\- **state**: current scrolling status.
- **offsetRemain**: actual amount by which the component scrolls.| -| onScroll(event: (xOffset: number, yOffset: number) => void) | Triggered to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs. | -| onScrollEdge(event: (side: Edge) => void) | Triggered when scrolling reaches the edge. | -| onScrollEnd(deprecated) (event: () => void) | Triggered when scrolling stops.
This event is deprecated since API version 9. Use the **onScrollStop** event instead. | -| onScrollStart9+(event: () => void) | Triggered when scrolling starts and is initiated by the user's finger dragging the **\** component or its scrollbar. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](#scroller) starts.| -| onScrollStop9+(event: () => void) | Triggered when scrolling stops after the user's finger leaves the screen. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](#scroller) stops.| +| onScrollFrameBegin9+(event: (offset: number, state: ScrollState) => { offsetRemain }) | Triggered when each frame scrolling starts. The input parameters indicate the amount by which the **\** component will scroll. The event handler then works out the amount by which the component needs to scroll based on the real-world situation and returns the result.
\- **offset**: amount to scroll by.
\- **state**: current scrolling status.
- **offsetRemain**: actual amount by which the component scrolls.
**NOTE**
1. This event is triggered when scrolling is started by the **\** component or other input settings, such as keyboard and mouse operations.
2. This event is not triggered when the controller API is called.
3. No out-of-bounds bounce effect is triggered.
**NOTE**
The value of **offsetRemain** can be a negative value.
If the **onScrollFrameBegine** event and **scrollBy** method are used to implement nested scrolling, set the **edgeEffect** attribute of the scrollable child component to **None**. For example, if a **\** is nested in the **\** component, **edgeEffect** of the **\** must be set to **EdgeEffect.None**.| +| onScroll(event: (xOffset: number, yOffset: number) => void) | Triggered to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs.
**NOTE**
1. This event is triggered when scrolling is started by the **\** component or other input settings, such as keyboard and mouse operations.
2. This event is triggered when the controller API is called.
3. The out-of-bounds bounce effect is triggered.| +| onScrollEdge(event: (side: Edge) => void) | Triggered when scrolling reaches the edge.
**NOTE**
1. This event is triggered when scrolling reaches the edge after being started by the **\** component or other input settings, such as keyboard and mouse operations.
2. This event is triggered when the controller API is called.
3. The out-of-bounds bounce effect is triggered.| +| onScrollEnd(deprecated) (event: () => void) | Triggered when scrolling stops.
This event is deprecated since API version 9. Use the **onScrollStop** event instead.
**NOTE**
1. This event is triggered when scrolling is stopped by the **\** component or other input settings, such as keyboard and mouse operations.
2. This event is triggered when the controller API is called, accompanied by a transition animation.| +| onScrollStart9+(event: () => void) | Triggered when scrolling starts and is initiated by the user's finger dragging the **\** component or its scrollbar. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](#scroller) starts.
**NOTE**
1. This event is triggered when scrolling is started by the **\** component or other input settings, such as keyboard and mouse operations.
2. This event is triggered when the controller API is called, accompanied by a transition animation.| +| onScrollStop9+(event: () => void) | Triggered when scrolling stops after the user's finger leaves the screen. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](#scroller) stops.
**NOTE**
1. This event is triggered when scrolling is stopped by the **\** component or other input settings, such as keyboard and mouse operations.
2. This event is triggered when the controller API is called, accompanied by a transition animation.| > **NOTE** > @@ -82,9 +82,9 @@ Scrolls to the specified position. | Name | Type | Mandatory| Description | | --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | -| xOffset | number | string | Yes | Horizontal scrolling offset. | -| yOffset | number | string | Yes | Vertical scrolling offset. | -| animation | {
duration: number,
curve: [Curve](ts-appendix-enums.md#curve)
} | No | Animation configuration, which includes the following:
- **duration**: scrolling duration.
- **curve**: scrolling curve.| +| xOffset | number \| string | Yes | Horizontal scrolling offset.
**NOTE**
This parameter cannot be set in percentage.
This parameter is valid only when the scroll axis is the x-axis.| +| yOffset | number \| string | Yes | Vertical scrolling offset.
**NOTE**
This parameter cannot be set in percentage.
This parameter is valid only when the scroll axis is the y-axis.| +| animation | {
duration: number,
curve: [Curve](ts-appendix-enums.md#curve)
} | No | Animation configuration, which includes the following:
- **duration**: scrolling duration.
- **curve**: scrolling curve.
Default value:
{
duration: 0,
curve: Curve.Ease
}
**NOTE**
A value less than 0 evaluates to the default value.| ### scrollEdge @@ -124,9 +124,9 @@ Obtains the scrolling offset. **Return value** -| Type | Description | -| ---------------------------------------- | ---------------------------------------- | -| {
xOffset: number,
yOffset: number
} | **xOffset**: horizontal scrolling offset.
**yOffset**: vertical scrolling offset.| +| Type | Description | +| ---------------------------------------------------------- | ------------------------------------------------------------ | +| {
xOffset: number,
yOffset: number
} | **xOffset**: horizontal scrolling offset.
**yOffset**: vertical scrolling offset.
**NOTE**
The unit of the return value is vp.| ### scrollToIndex @@ -198,7 +198,7 @@ struct ScrollExample { .scrollable(ScrollDirection.Vertical) // The scrollbar scrolls in the vertical direction. .scrollBar(BarState.On) // The scrollbar is always displayed. .scrollBarColor(Color.Gray) // Color of the scrollbar. - .scrollBarWidth(30) // Width of the scrollbar. + .scrollBarWidth(10) // The scrollbar width is 10. .edgeEffect(EdgeEffect.None) .onScroll((xOffset: number, yOffset: number) => { console.info(xOffset + ' ' + yOffset) @@ -211,21 +211,25 @@ struct ScrollExample { }) Button('scroll 150') + .height('5%') .onClick(() => { // Click to scroll down to 150.0 vp. this.scroller.scrollBy(0,150) }) .margin({ top: 10, left: 20 }) Button('scroll 100') + .height('5%') .onClick(() => { // Click to scroll down by 100.0 vp. this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 }) }) .margin({ top: 60, left: 20 }) Button('back top') + .height('5%') .onClick(() => { // Click to go back to the top. this.scroller.scrollEdge(Edge.Top) }) .margin({ top: 110, left: 20 }) Button('next page') + .height('5%') .onClick(() => { // Click to go to the next page. this.scroller.scrollPage({ next: true }) })