为什么捐赠
API 浏览器
联系站长
下拉刷新

QPullToRefresh 是一个允许用户通过下拉操作来刷新页面内容(或获取最新内容)的组件。

正在加载 QPullToRefresh API...

用法

基础

WARNING

在您的 @refresh 函数中,当数据加载完成后,别忘了调用传入的 done() 函数。

当内部滚动位置处于顶部时,向下拉动内容(使用鼠标或手指触摸)即可触发刷新。

基础


自定义图标

自定义图标


自定义颜色

自定义颜色


提示

滚动容器

请阅读这里了解 Quasar 如何确定要绑定滚动事件的容器。

  • 如果使用 QLayout,建议将 QPullToRefresh 作为 QPage 的直接子元素,并用它包裹页面内容。
  • 如果您更改了此组件的父元素,别忘了在 QPullToRefresh 的 Vue 引用上调用 updateScrollTarget()
  • QPullToRefresh 同时也允许文本选择,所以如果您的内容中包含图片,建议为图片添加 draggable="false" 属性,否则浏览器的原生拖拽行为可能会造成干扰。

Accessibility
v2.25+

The pull gesture is pointer-only — keyboard and assistive technology users cannot perform it. The component exposes a trigger() method on its ref for exactly this reason: wire it to a visible refresh button so everyone has a way to refresh. The refreshing spinner is not announced to screen readers either, so if completion matters to your users, announce it yourself (e.g. through a live region or a notification) when your @refresh handler finishes.