Used to provide interactive operations for pull-down refresh.
\nRegister component globally via app.use, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { PullRefresh } from 'vant';\n\nconst app = createApp();\napp.use(PullRefresh);\nThe refresh event will be Emitted when pull refresh, you should set v-model to false to reset loading status after process refresh event.
<van-pull-refresh v-model="loading" @refresh="onRefresh">\n <p>Refresh Count: {{ count }}</p>\n</van-pull-refresh>\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const count = ref(0);\n const loading = ref(false);\n const onRefresh = () => {\n setTimeout(() => {\n showToast('Refresh Success');\n loading.value = false;\n count.value++;\n }, 1000);\n };\n\n return {\n count,\n loading,\n onRefresh,\n };\n },\n};\nUse success-text to set the success prompt after the refresh is successful
<van-pull-refresh\n v-model="isLoading"\n success-text="Refresh success"\n @refresh="onRefresh"\n>\n <p>Refresh Count: {{ count }}</p>\n</van-pull-refresh>\nUse slots to custom tips.
\n<van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">\n <template #pulling="props">\n <img\n class="doge"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"\n :style="{ transform: `scale(${props.distance / 80})` }"\n />\n </template>\n\n <template #loosing>\n <img\n class="doge"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"\n />\n </template>\n\n <template #loading>\n <img\n class="doge"\n src="https://fastly.jsdelivr.net/npm/@vant/assets/doge-fire.jpeg"\n />\n </template>\n <p>Refresh Count: {{ count }}</p>\n</van-pull-refresh>\n\n<style>\n .doge {\n width: 140px;\n height: 72px;\n margin-top: 8px;\n border-radius: 4px;\n }\n</style>\n| Attribute | \nDescription | \nType | \nDefault | \n
|---|---|---|---|
| v-model | \nLoading status | \nboolean | \n- | \n
| pulling-text | \nText to show when pulling | \nstring | \nPull to refresh... | \n
| loosing-text | \nText to show when loosing | \nstring | \nLoose to refresh... | \n
| loading-text | \nText to show when loading | \nstring | \nLoading... | \n
| success-text | \nText to show when loading success | \nstring | \n- | \n
| success-duration | \nSuccess text display duration(ms) | \nnumber | string | \n500 | \n
| animation-duration | \nAnimation duration | \nnumber | string | \n300 | \n
| head-height | \nHeight of head | \nnumber | string | \n50 | \n
| pull-distance | \nThe distance to trigger the pull refresh | \nnumber | string | \nsame as head-height | \n
| disabled | \nWhether to disable pull refresh | \nboolean | \nfalse | \n
| Event | \nDescription | \nParameters | \n
|---|---|---|
| refresh | \nEmitted after pulling refresh | \n- | \n
| change | \nEmitted when draging or status changed | \n{ status: string, distance: number } | \n
| Name | \nDescription | \nSlotProps | \n
|---|---|---|
| default | \nDefault slot | \n- | \n
| normal | \nContent of head when at normal status | \n- | \n
| pulling | \nContent of head when at pulling | \n{ distance: number } | \n
| loosing | \nContent of head when at loosing | \n{ distance: number } | \n
| loading | \nContent of head when at loading | \n{ distance: number } | \n
| success | \nContent of head when succeed | \n- | \n
The component exports the following type definitions:
\nimport type { PullRefreshProps } from 'vant';\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\n| Name | \nDefault Value | \nDescription | \n
|---|---|---|
| --van-pull-refresh-head-height | \n50px | \n- | \n
| --van-pull-refresh-head-font-size | \nvar(--van-font-size-md) | \n- | \n
| --van-pull-refresh-head-text-color | \nvar(--van-text-color-2) | \n- | \n
| --van-pull-refresh-loading-icon-size | \n16px | \n- | \n