diff --git a/en/application-dev/reference/apis/js-apis-measure.md b/en/application-dev/reference/apis/js-apis-measure.md index 6095a5e68ed87bc8c92fe3198e36ac4982fe70a7..b1e3699e9cbac290f6cf53d75c8c20d9f57544a4 100644 --- a/en/application-dev/reference/apis/js-apis-measure.md +++ b/en/application-dev/reference/apis/js-apis-measure.md @@ -15,7 +15,7 @@ import measure from '@ohos.measure' ## measure.measureText -measureText(options: MeasureOptions): double +measureText(options: MeasureOptions): number Measures the width of the given single-line text. @@ -31,7 +31,7 @@ Measures the width of the given single-line text. | Type | Description | | ------------ | --------- | -| double | Text width.
The unit is px.| +| number | Text width.
The unit is px.| **Example** 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 4ad560e029ae6ad0ab5573beb62b774b995c52ce..677f97e8f31bb6a9ae961ac010d1bc60bd1299a2 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** > @@ -61,7 +61,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ## Scroller -Implements a controller for a scrollable container component. You can bind this component to a container component and use it to control the scrolling of that component. One controller can control only one container component. The supported container components are **\**, **\**, **\**, **\**. +Implements a controller for a scrollable container component. You can bind this component to a container component and use it to control the scrolling of that component. One controller can control only one container component. The supported container components are **\**, **\**, **\**, and **\**. ### Objects to Import @@ -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 }) })