为什么捐赠
API 资源管理器
无限滚动

QInfiniteScroll 组件允许您在用户滚动页面时加载新内容。

正在加载 QInfiniteScroll API...

用法

提示

当剩余可见像素少于 offset(默认值 = 500)时,无限滚动会预先加载项目。如果您获取的内容高度小于屏幕上滚动目标容器的高度,则无限滚动将继续加载更多内容。因此,请确保您加载了足够的内容。

提示

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

滚动到底部以查看 QInfiniteScroll 的实际效果。

基本用法



自定义滚动目标容器



反向(消息风格)



提示

滚动容器

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

  • 最适合作为渲染页面 Vue 组件的直接子元素放置
  • 如果更改此组件的父元素,请不要忘记在 QInfiniteScroll Vue 引用上调用 updateScrollTarget()
  • 如果您需要指定滚动目标内部元素(因为自动检测到的元素不是所需的元素),请在 scroll-target 属性中传递 CSS 选择器(作为字符串)或 DOM 元素

警告

如果您使用 scroll-target 属性传递自定义滚动目标容器,则必须确保该元素存在并且可以溢出(它必须具有最大高度和允许滚动的溢出)。

如果滚动目标容器无法溢出,您将遇到无限加载的情况。

在 QMenu 中使用