diff --git a/en/application-dev/reference/arkui-ts/Readme-EN.md b/en/application-dev/reference/arkui-ts/Readme-EN.md index 7924866850f603116b7a82f8f6fda1eadc56fa99..775bd3d067c466e6415a565eaefb15964956c61e 100644 --- a/en/application-dev/reference/arkui-ts/Readme-EN.md +++ b/en/application-dev/reference/arkui-ts/Readme-EN.md @@ -52,17 +52,20 @@ - [Gauge](ts-basic-components-gauge.md) - [Image](ts-basic-components-image.md) - [ImageAnimator](ts-basic-components-imageanimator.md) + - [LoadingProgress](ts-basic-components-loadingprogress.md) - [Marquee](ts-basic-components-marquee.md) - [Progress](ts-basic-components-progress.md) - [QRCode](ts-basic-components-qrcode.md) - [Rating](ts-basic-components-rating.md) - - [Span](ts-basic-components-span.md) + - [Select](ts-basic-components-select.md) - [Slider](ts-basic-components-slider.md) + - [Span](ts-basic-components-span.md) - [Text](ts-basic-components-text.md) - [TextArea](ts-basic-components-textarea.md) - [TextInput](ts-basic-components-textinput.md) - [Toggle](ts-basic-components-toggle.md) - + - [TextClock](ts-basic-components-textclock.md) + - [Container Components](ts-components-container.md) - [AlphabetIndexer](ts-container-alphabet-indexer.md) - [Badge](ts-container-badge.md) @@ -86,29 +89,28 @@ - [Swiper](ts-container-swiper.md) - [Tabs](ts-container-tabs.md) - [TabContent](ts-container-tabcontent.md) - - [Stepper](ts-container-stepper.md) - - [StepperItem](ts-container-stepperitem.md) - + + - [Refresh](ts-container-refresh.md) - [Drawing Components](ts-drawing-components.md) + - [Circle](ts-drawing-components-circle.md) - [Ellipse](ts-drawing-components-ellipse.md) - [Line](ts-drawing-components-line.md) - [Polyline](ts-drawing-components-polyline.md) - [Polygon](ts-drawing-components-polygon.md) - - [Path](ts-drawing-components-path.md) + - [Path](ts-drawing-components-path.md) - [Rect](ts-drawing-components-rect.md) - [Shape](ts-drawing-components-shape.md) - + - [Canvas Components](ts-components-canvas.md) - [Canvas](ts-components-canvas-canvas.md) - [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) - [OffscreenCanvasRenderingConxt2D](ts-offscreencanvasrenderingcontext2d.md) - [Lottie](ts-components-canvas-lottie.md) - [Path2D](ts-components-canvas-path2d.md) - - [CanvasGradient](ts-components-canvas-canvasgradient.md) + - [CanvasGradient](ts-components-canvas-canvasgradient.md) - [ImageBitmap](ts-components-canvas-imagebitmap.md) - [ImageData](ts-components-canvas-imagedata.md) - - [Animation](ts-animation.md) - [Attribute Animation](ts-animatorproperty.md) - [Explicit Animation](ts-explicit-animation.md) @@ -129,5 +131,6 @@ - [List Selection Dialog Box](ts-methods-action-sheet.md) - [Appendix](ts-appendix.md) + - [Built-in Enums](ts-appendix-enums.md) diff --git a/en/application-dev/reference/arkui-ts/figures/refresh.gif b/en/application-dev/reference/arkui-ts/figures/refresh.gif new file mode 100644 index 0000000000000000000000000000000000000000..f7796bdc1286c55b3853d52cf0f81d84cec6e8d4 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/refresh.gif differ diff --git a/en/application-dev/reference/arkui-ts/ts-container-refresh.md b/en/application-dev/reference/arkui-ts/ts-container-refresh.md new file mode 100644 index 0000000000000000000000000000000000000000..fefd46e33b5f0f43fe4565882e288b10fa7952f9 --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-container-refresh.md @@ -0,0 +1,80 @@ +# Refresh + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. + +The **** component is used to refresh a page through a pull-down gesture. + +## Required Permissions + +None + +## Child Components + +This component supports only one child component. + +## APIs + +Refresh\(value: \{refreshing: boolean, offset?: Length, friction?: number\}\) + +- Parameters + + | Name| Value Type| Mandatory| Default Value| Description| + | -------- | -------- | -------- | -------- | -------- | + | refreshing | boolean | Yes| - | Whether the current component is being refreshed.| + | offset | Length | No| 16 | Distance to the top of the parent component from the **** component that comes to rest after a successful pull-down gesture.| + | friction | number | No| 62 | Coefficient of friction, which indicates the **** component's sensitivity to the pull-down gesture. The value ranges from 0 to 100.
- **0** indicates that the **** component is not sensitive to the pull-down gesture.
- **100** indicates that the **** component is highly sensitive to the pull-down gesture.
- A larger value indicates a more sensitive response of the **** component to the pull-down gesture.| + + + +## Events + + +| Name| Description| +| -------- | -------- | +| onStateChange(callback: (state: RefreshStatus) => void)| Triggered when the refresh status changes.
**state** indicates the refresh status.| +| onRefreshing(callback: () => void)| Triggered when the component enters the refresh state.| + +- RefreshStatus enums + + | Name| Description| + | -------- | -------- | + | Inactive | The component is not pulled down. This is the default value.| + | Drag | The component is being pulled down, but the pulled distance is shorter than the minimum length required to trigger the refresh.| + | OverDrag | The component is being pulled down, and the pulled distance exceeds the minimum length required to trigger the refresh.| + | Refresh | The pull-down ends, and the component rebounds to the minimum length required to trigger the refresh and enters the refresh state.| + | Done | The refresh is complete, and the component returns to the initial state (top).| + + +## Example + +``` +@Entry +@Component +struct RefreshExample { + @State isRefreshing: boolean = false + @State counter: number = 0 + + build() { + Column() { + Refresh({refreshing: this.isRefreshing, offset: 120, friction: 100}) { + Text('Pull Down and refresh: ' + this.counter) + .fontSize(30) + .margin(10) + } + .onStateChange((refreshStatus: RefreshStatus) => { + console.info('Refresh onStatueChange state is ' + refreshStatus) + }) + .onRefreshing(() => { + setTimeout(() => { + this.counter++ + this.isRefreshing = false + }, 1000) + console.log('onRefreshing test') + }) + } + } +} +``` + +![](figures/refresh.gif)