vant/docs/markdown/en-US/pull-refresh.md

PullRefresh

Install

import { PullRefresh } from 'vant';

Vue.use(PullRefresh);

Usage

Basic Usage

The refresh event will be triggered when pull refresh, you should set v-model to false to reset loading status after process refresh event.

<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
  <p>Refresh Count: {{ count }}</p>
</van-pull-refresh>

export default {
  data() {
    return {
      count: 0,
      isLoading: false
    }
  },

  methods: {
    onRefresh() {
      setTimeout(() => {
        this.$toast('Refresh Success');
        this.isLoading = false;
        this.count++;
      }, 500);
    }
  }
}

API

Attribute	Description	Type	Default	Accepted Values
v-model	Loading status	Boolean	-	-
pulling-text	Text to show when pulling	String	Pull to refresh...	-
loosing-text	Text to show when loosing	String	Loose to refresh...	-
loading-text	Text to show when loading	String	Loading...	-
animation-duration	Animation duration	Number	300	-
head-height	Height of head	Number	50	-

Event

Event	Description	Parameters
refresh	Triggered when pull refresh	-

Slot

name	Description
-	Default slot
normal	Content of head when at normal status
pulling	Content of head when at pulling
loosing	Content of head when at loosing
loading	Content of head when at loading