1e41f4b71Sopenharmony_ci# SwipeRefresher
2e41f4b71Sopenharmony_ci
3e41f4b71Sopenharmony_ci
4e41f4b71Sopenharmony_ciThe swipe refresher is a component used to obtain and load content, typically with a pull-down gesture.
5e41f4b71Sopenharmony_ci
6e41f4b71Sopenharmony_ci
7e41f4b71Sopenharmony_ci
8e41f4b71Sopenharmony_ci> **NOTE**
9e41f4b71Sopenharmony_ci>
10e41f4b71Sopenharmony_ci> This component and its child components are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
11e41f4b71Sopenharmony_ci
12e41f4b71Sopenharmony_ci
13e41f4b71Sopenharmony_ci## Modules to Import
14e41f4b71Sopenharmony_ci
15e41f4b71Sopenharmony_ci```
16e41f4b71Sopenharmony_ciimport { SwipeRefresher } from '@kit.ArkUI'
17e41f4b71Sopenharmony_ci```
18e41f4b71Sopenharmony_ci
19e41f4b71Sopenharmony_ci
20e41f4b71Sopenharmony_ci## Child Components
21e41f4b71Sopenharmony_ci
22e41f4b71Sopenharmony_ciNot supported
23e41f4b71Sopenharmony_ci
24e41f4b71Sopenharmony_ci## Attributes
25e41f4b71Sopenharmony_ciThe [universal attributes](ts-universal-attributes-size.md) are supported.
26e41f4b71Sopenharmony_ci
27e41f4b71Sopenharmony_ci
28e41f4b71Sopenharmony_ci## SwipeRefresher
29e41f4b71Sopenharmony_ci
30e41f4b71Sopenharmony_ciSwipeRefresher ({content?: string, isLoading: boolean})
31e41f4b71Sopenharmony_ci
32e41f4b71Sopenharmony_ci**Decorator**: @Component
33e41f4b71Sopenharmony_ci
34e41f4b71Sopenharmony_ci**Atomic service API**: This API can be used in atomic services since API version 11.
35e41f4b71Sopenharmony_ci
36e41f4b71Sopenharmony_ci**System capability**: SystemCapability.ArkUI.ArkUI.Full
37e41f4b71Sopenharmony_ci
38e41f4b71Sopenharmony_ci**Parameters**
39e41f4b71Sopenharmony_ci
40e41f4b71Sopenharmony_ci| Name| Type| Mandatory| Decorator| Description|
41e41f4b71Sopenharmony_ci| -------- | -------- | -------- | -------- | -------- |
42e41f4b71Sopenharmony_ci| content | string | No| \@Prop | Text displayed when the content is loaded.|
43e41f4b71Sopenharmony_ci| isLoading | boolean | If yes, | \@Prop | Whether content is being loaded.<br> The value **true** means that content is being loaded, and **false** means the opposite.|
44e41f4b71Sopenharmony_ci
45e41f4b71Sopenharmony_ci## Events
46e41f4b71Sopenharmony_ciThe [universal events](ts-universal-events-click.md) are supported.
47e41f4b71Sopenharmony_ci
48e41f4b71Sopenharmony_ci## Example
49e41f4b71Sopenharmony_ci```ts
50e41f4b71Sopenharmony_ciimport { SwipeRefresher } from '@kit.ArkUI';
51e41f4b71Sopenharmony_ci
52e41f4b71Sopenharmony_ci@Entry
53e41f4b71Sopenharmony_ci@Component
54e41f4b71Sopenharmony_cistruct Index {
55e41f4b71Sopenharmony_ci  build() {
56e41f4b71Sopenharmony_ci    Column() {
57e41f4b71Sopenharmony_ci      SwipeRefresher({
58e41f4b71Sopenharmony_ci        content: 'Loading',
59e41f4b71Sopenharmony_ci        isLoading: true
60e41f4b71Sopenharmony_ci      })
61e41f4b71Sopenharmony_ci      SwipeRefresher({
62e41f4b71Sopenharmony_ci        content: '',
63e41f4b71Sopenharmony_ci        isLoading: true
64e41f4b71Sopenharmony_ci      })
65e41f4b71Sopenharmony_ci      SwipeRefresher({
66e41f4b71Sopenharmony_ci        content: 'Loading',
67e41f4b71Sopenharmony_ci        isLoading: false
68e41f4b71Sopenharmony_ci      })
69e41f4b71Sopenharmony_ci    }
70e41f4b71Sopenharmony_ci  }
71e41f4b71Sopenharmony_ci}
72e41f4b71Sopenharmony_ci```
73e41f4b71Sopenharmony_ci
74e41f4b71Sopenharmony_ci![Snipaste_2023-07-24_11-35-40](figures/Snipaste_2023-07-24_11-35-40.gif)
75