无限滚动

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

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

TIP

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

TIP

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

滚动到底部以查看QInfiniteScroll的运行情况

Basic
Custom Scroll Target Container
Reverse (Messenger style)

提示

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

WARNING

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

如果滚动目标容器无法溢出,则会出现永久加载的情况。

QInfiniteScroll API

Loading API...
Please wait...