API 浏览器
下拉刷新

QPullToRefresh 组件允许用户下拉刷新页面内容(或检索最新内容)。

¥The QPullToRefresh is a component that allows the user to pull down in order to refresh page content (or retrieve the newest content).

Loading QPullToRefresh API...

用法(Usage)

¥Usage

基本(Basic)

¥Basic

警告

在你的 @refresh 函数中,完成更多数据加载后,请不要忘记调用传入的 done() 函数。

¥In your @refresh function, don’t forget to call the passed in done() function when you have finished loading more data.

要刷新,请在内部滚动位置位于顶部时,下拉(使用鼠标或手指触摸)下方内容。

¥To refresh, pull down (with mouse or through finger touch) on the content below when the inner scroll position is the top.

Basic



自定义图标(Custom icon)

¥Custom icon

Custom icon



自定义颜色(Custom coloring)

¥Custom coloring

Custom coloring



提示(Tips)

¥Tips

滚动容器

请阅读 此处,了解 Quasar 如何确定要附加滚动事件的容器。

¥Please read here about how Quasar determines the container to attach scrolling events to.

  • 如果使用 QLayout,建议将 QPullToRefresh 设置为 QPage 的直接子元素,并用其包裹页面内容。

    ¥If using a QLayout, then it’s recommended that you put QPullToRefresh as direct child of QPage and wrap your page content with it.

  • 如果你更改此组件的父级,请不要忘记在 QPullToRefresh Vue 引用上调用 updateScrollTarget()

    ¥If you change the parent of this component, don’t forget to call updateScrollTarget() on the QPullToRefresh Vue reference.

  • QPullToRefresh 也允许文本选择,因此如果你的内容还包含图片,你可能需要为其添加 draggable="false",否则原生浏览器行为可能会产生负面影响。

    ¥QPullToRefresh also allows text selection, so if your content also has images, you might want to add draggable="false" to them, otherwise the native browser behavior might interfere in a negative way.