PullRefresh 下拉刷新

引入

通过以下方式来全局注册组件,更多注册方式请参考组件注册

基础用法

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

  1. <van-pull-refresh v-model="loading" @refresh="onRefresh">
  2. <p>刷新次数: {{ count }}</p>

成功提示

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

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

Props

Events

Slots

组件导出以下类型定义:

  1. import type { PullRefreshProps } from 'vant';

样式变量

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

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

PullRefresh 的触发条件是?

PullRefresh 的触发条件是「父级滚动元素的滚动条在顶部位置」。

  • 如果最近一个可滚动的父级元素是 window,则要求 window.pageYOffset === 0