PullRefresh 下拉刷新
引入
通过以下方式来全局注册组件,更多注册方式请参考组件注册。
基础用法
下拉刷新时会触发 事件,在事件的回调函数中可以进行同步或异步操作,操作完成后将 v-model
设置为 false
,表示加载完成。
<van-pull-refresh v-model="loading" @refresh="onRefresh">
<p>刷新次数: {{ count }}</p>
成功提示
<van-pull-refresh
v-model="isLoading"
@refresh="onRefresh"
>
<p>刷新次数: {{ count }}</p>
</van-pull-refresh>
通过插槽可以自定义下拉刷新过程中的提示内容。
Props
Events
Slots
组件导出以下类型定义:
import type { PullRefreshProps } from 'vant';
样式变量
PullRefresh 的内容未填满屏幕时,只有一部分区域可以下拉?
默认情况下,下拉区域的高度是和内容高度保持一致的,如果需要让下拉区域始终为全屏,可以给 PullRefresh 设置一个与屏幕大小相等的最小高度:
PullRefresh 的触发条件是?
PullRefresh 的触发条件是「父级滚动元素的滚动条在顶部位置」。
- 如果最近一个可滚动的父级元素是
window
,则要求window.pageYOffset === 0
。