QInfiniteScroll 组件允许你在用户滚动页面时加载新内容。
¥The QInfiniteScroll component allows you to load new content as the user scrolls the page.
用法(Usage)
¥Usage
提示
当剩余可见区域少于 offset
(默认值 = 500)像素时,无限滚动会提前加载项目。如果你获取的内容的高度小于滚动目标容器在屏幕上的高度,则无限滚动将继续加载更多内容。因此,请确保加载足够的内容。
¥Infinite Scroll loads items in advance when less than offset
(default = 500) pixels is left to be seen. If the content you fetch has height less than the scroll target container’s height on screen then Infinite Scroll will continue loading more content. So make sure you load enough content.
提示
在你的 @load
函数中,完成更多数据加载后,请不要忘记调用传入的 done()
函数。
¥In your @load
function, don’t forget to call the passed in done()
function when you have finished loading more data.
滚动至页面底部,查看 QInfiniteScroll 的实际运行情况。
¥Scroll to the bottom to see QInfiniteScroll in action.
提示(Tips)
¥Tips
滚动容器
请阅读 此处,了解 Quasar 如何确定要附加滚动事件的容器。
¥Please read here about how Quasar determines the container to attach scrolling events to.
作为 Vue 组件的直接子组件,用于渲染页面时效果最佳。
¥Works best when placed as direct child of the Vue component rendering your Page
如果你更改此组件的父级,请不要忘记在 QInfiniteScroll Vue 引用上调用
updateScrollTarget()
。¥If you change the parent of this component, don’t forget to call
updateScrollTarget()
on the QInfiniteScroll Vue reference.如果你需要指定滚动目标内部元素(因为自动检测到的目标不是所需的目标),请将 CSS 选择器(字符串形式)或 DOM 元素传递给
scroll-target
属性。¥If you need to specify the scroll target inner element (because the auto detected one is not the desired one) pass a CSS selector (as string) or the DOM element in the
scroll-target
prop
警告
如果你传递带有 scroll-target
属性的自定义滚动目标容器,则必须确保该元素存在并且可以溢出(它必须具有最大高度和允许滚动的溢出)。
¥If you pass a custom scroll target container with scroll-target
prop you must make sure that the element exists and that it can be overflowed (it must have a maximum height and an overflow that allows scrolling).
如果滚动目标容器无法溢出,你将面临永久加载的情况。
¥If the scroll target container cannot be overflowed you’ll get a forever loading situation.