PullRefresh 下拉刷新

引入

  1. import{PullRefresh}from'vant';
  2. Vue.use(PullRefresh);

代码演示

基础用法

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

  1. <van-pull-refreshv-model="isLoading" @refresh="onRefresh">
  2. <p>刷新次数: {{ count }}</p>
  3. </van-pull-refresh>
  1. exportdefault{
  2. data(){
  3. return{
  4. count:0,
  5. isLoading:false
  6. }
  7. },
  8. methods:{
  9. onRefresh(){
  10. setTimeout(()=>{
  11. this.$toast('刷新成功');
  12. this.isLoading =false;
  13. this.count++;
  14. },500);
  15. }
  16. }
  17. }

API

Props

参数说明类型默认值版本
v-model是否在加载中Boolean--
pulling-text下拉过程文案String下拉即可刷新…-
loosing-text释放过程文案String释放即可刷新…-
loading-text加载过程文案String加载中…-
success-text加载成功提示文案String-1.6.2
success-duration加载成功提示时长(ms)Number5001.6.2
animation-duration动画时长Number300-
head-height顶部内容高度Number50-
disabled是否禁用Booleanfalse1.1.10

Events

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

Slots

名称说明
default自定义内容
normal非下拉状态时顶部内容
pulling下拉过程中顶部内容
loosing释放过程中顶部内容
loading加载过程中顶部内容

PullRefresh 下拉刷新 - 图1