!1893 1543完成：新增 ts-container-refresh.md 并更新 readme 文件

Merge pull request !1893 from ester.zhou/TR-1581

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)
 

en/application-dev/reference/arkui-ts/ts-container-refresh.md

+# 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 **<Refresh\>** 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 **<Refresh\>** component that comes to rest after a successful pull-down gesture.|
+  | friction | number | No| 62 | Coefficient of friction, which indicates the **<Refresh\>** component's sensitivity to the pull-down gesture. The value ranges from 0 to 100. <br/>-&nbsp;**0** indicates that the **<Refresh\>** component is not sensitive to the pull-down gesture. <br/>-&nbsp;**100** indicates that the **<Refresh\>** component is highly sensitive to the pull-down gesture. <br/>-&nbsp;A larger value indicates a more sensitive response of the **<Refresh\>** component to the pull-down gesture.|
+
+
+
+## Events
+
+
+| Name| Description|
+| -------- | -------- |
+| onStateChange(callback: (state: RefreshStatus) => void)| Triggered when the refresh status changes. <br/>**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)