PullRefresh 下拉刷新

使用指南

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

代码演示

基础用法

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

  1. <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
  2. <p>刷新次数: {{ count }}</p>
  3. </van-pull-refresh>
  1. export default {
  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

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

Event

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

Slot

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

原文: https://youzan.github.io/vant/#/zh-CN/pull-refresh