PullRefresh 下拉刷新

文档: https://vant-contrib.gitee.io/vant/#/zh-CN/pull-refresh

也是一个容器:

<van-pull-refresh v-model="loading" @refresh="refresh">
</van-pull-refresh>

const loading = ref(false)
const refresh = () => {
  setTimeout(() => loading.value = false, 1000)
}

默认为宽度填充, 无高度的一个容器. 组件内部支持下拉动效(需要将组件"撑起来").

刷新交互有一个过程:

  1. 下拽开始, 提示下拉会刷新, pulling-text 属性控制内容.
  2. 下拉到一定高度, 提示释放会刷新, 使用 loosing-text 属性控制.
  3. 释放刷新中, 触发 refresh 事件. 使用 loading-text 属性控制提示文字.
  4. 刷新成功, 显示最终内容. 使用 success-text 控制显示内容. 不适用该属性, 不显示.

常用属性:

  • 使用 v-model 来定义刷新状态, 类型为 boolean 类型. 一般配合 refresh 事件一起使用.
  • 拖拽状态文字可以分别使用 pulling-text, loosing-text, loading-text, success-text 属性来控制.
  • 状态如果要自定义可以分别使用 pulling, looseing, loading, 和 success 插槽来定义.
Last Updated:
Contributors: jk