PullToRefresh
An interaction to load new content with a finger pull-to-refresh in a list.
Install
npm install antd-mobile@5.43.0
antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register createRoot with unstableSetRender at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with <html data-prefers-color-scheme="dark">.
Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as DemoBlock are JGuang rewrites, not antd-mobile APIs.
An interaction to load new content with a finger pull-to-refresh in a list.
When to Use
It is suitable for updating the content of the current page.
Demos
Basic Usage
Customize Text
Handle Refresh Error
Nested Scroll Areas
PullToRefresh
Props
type PullStatus = 'pulling' | 'canRelease' | 'refreshing' | 'complete'
| Name | Description | Type | Default |
|---|---|---|---|
| canReleaseText | Hint text of release | ReactNode | '释放立即刷新' |
| completeDelay | The time for the delay to disappear after completion, the unit is ms | number | 500 |
| completeText | Hint text when completed | ReactNode | '刷新成功' |
| disabled | Whether the PullToRefresh is disabled | boolean | false |
| headHeight | The height of the head prompt content area, the unit is px | number | 40 |
| onRefresh | Handler function when refresh triggered | () => Promise<any> | - |
| pullingText | Hint text of pulling | ReactNode | '下拉刷新' |
| refreshingText | Hint text when refreshing | ReactNode | '加载中……' |
| renderText | Customize the pulling content according to the pulling status | (status: PullStatus) => ReactNode | - |
| threshold | How far to pull down to trigger refresh, unit is px | number | 60 |
FAQ
Does it support pull up to load more?
Pull-up loading is another component: InfiniteScroll.
About the browser's default pull-down behavior
Some browsers or webview containers have elastic effects or pull-to-refresh logic. We do not recommend using the PullToRefresh component in this environment. If you must use it, please disable the default pull-down and elastic effects of the outer browser. , otherwise PullToRefresh and the browser's default behavior may be triggered at the same time, resulting in a poor user experience.