PullRefresh 下拉刷新

介绍

用于提供下拉刷新的交互操作。

引入

  1. import { createApp } from 'vue';
  2. import { PullRefresh } from 'vant';
  3. const app = createApp();
  4. app.use(PullRefresh);

代码演示

基础用法

下拉刷新时会触发 refresh 事件,在事件的回调函数中可以进行同步或异步操作,操作完成后将 v-model 设置为 false,表示加载完成。

  1. <van-pull-refresh v-model="state.loading" @refresh="onRefresh">
  2. <p>刷新次数: {{ state.count }}</p>
  3. </van-pull-refresh>
  1. import { reactive } from 'vue';
  2. import { Toast } from 'vant';
  3. export default {
  4. setup() {
  5. const state = reactive({
  6. count: 0,
  7. loading: false,
  8. });
  9. const onRefresh = () => {
  10. setTimeout(() => {
  11. Toast('刷新成功');
  12. state.loading = false;
  13. state.count++;
  14. }, 1000);
  15. };
  16. return {
  17. state,
  18. onRefresh,
  19. };
  20. },
  21. };

成功提示

通过 success-text 可以设置刷新成功后的顶部提示文案。

  1. <van-pull-refresh
  2. v-model="isLoading"
  3. success-text="刷新成功"
  4. @refresh="onRefresh"
  5. >
  6. <p>刷新次数: {{ count }}</p>
  7. </van-pull-refresh>

自定义提示

通过插槽可以自定义下拉刷新过程中的提示内容。

  1. <van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
  2. <!-- 下拉提示,通过 scale 实现一个缩放效果 -->
  3. <template #pulling="props">
  4. <img
  5. class="doge"
  6. src="https://img.yzcdn.cn/vant/doge.png"
  7. :style="{ transform: `scale(${props.distance / 80})` }"
  8. />
  9. </template>
  10. <!-- 释放提示 -->
  11. <template #loosing>
  12. <img class="doge" src="https://img.yzcdn.cn/vant/doge.png" />
  13. </template>
  14. <!-- 加载提示 -->
  15. <template #loading>
  16. <img class="doge" src="https://img.yzcdn.cn/vant/doge-fire.jpg" />
  17. </template>
  18. <p>刷新次数: {{ count }}</p>
  19. </van-pull-refresh>
  20. <style>
  21. .doge {
  22. width: 140px;
  23. height: 72px;
  24. margin-top: 8px;
  25. border-radius: 4px;
  26. }
  27. </style>

API

Props

参数说明类型默认值
v-model是否处于加载中状态boolean-
pulling-text下拉过程提示文案string下拉即可刷新…
loosing-text释放过程提示文案string释放即可刷新…
loading-text加载过程提示文案string加载中…
success-text刷新成功提示文案string-
success-duration刷新成功提示展示时长(ms)number | string500
animation-duration动画时长number | string300
head-height v2.4.2顶部内容高度number | string50
disabled是否禁用下拉刷新booleanfalse

Events

事件名说明回调参数
refresh下拉刷新时触发-

Slots

名称说明参数
default自定义内容-
normal非下拉状态时顶部内容-
pulling下拉过程中顶部内容{ distance: 当前下拉距离 }
loosing释放过程中顶部内容{ distance: 当前下拉距离 }
loading加载过程中顶部内容{ distance: 当前下拉距离 }
success刷新成功提示内容-

样式变量

组件提供了下列 Less 变量,可用于自定义样式,使用方法请参考主题定制

名称默认值描述
@pull-refresh-head-height50px-
@pull-refresh-head-font-size@font-size-md-
@pull-refresh-head-text-color@gray-6-

常见问题

PullReresh 的内容未填满屏幕时,只有一部分区域可以下拉?

默认情况下,下拉区域的高度是和内容高度保持一致的,如果需要让下拉区域始终为全屏,可以给 PullRefresh 设置一个与屏幕大小相等的最小高度:

  1. <van-pull-refresh style="min-height: 100vh;" />

在桌面端无法操作组件?

参见桌面端适配

PullRefresh 下拉刷新 - 图1