Note

This documentation describes the LoadDataOnScroll Vue component for native UI views for Xml templates see load-data-on-scroll.

LoadDataOnScroll

Wraps scrollable content and triggers a load callback when the user scrolls near the end of the list. Displays a spinner during loading and auto-triggers if no scrollbar exists.

Import

import { LoadDataOnScroll } from '@neos/design-system'

Props

Prop	Type	Default	Description
`hasMoreData`	`boolean`	—	Required. When `true`, the load callback will be triggered at the scroll threshold
`onLoad`	`() => Promise<void>`	`undefined`	Async function called to load the next page of data
`direction`	`'vertical' \\| 'horizontal'`	`'vertical'`	Scroll direction to monitor
`spinnerSize`	`Size`	`'extralarge'`	Size of the loading spinner

Slots

Slot	Description
`default`	The scrollable content

Notes

Triggers onLoad when the user scrolls within 10% of the list end.
On mount, automatically calls onLoad if the content does not overflow (no scrollbar visible).
Looks for a child element with data-virtual-repeat attribute as the scroll container, otherwise uses the first child.

Usage Examples

Infinite scroll list

<LoadDataOnScroll :has-more-data="hasMore" :on-load="loadNextPage">
  <div v-for="item in items" :key="item.id">{{ item.name }}</div>
</LoadDataOnScroll>

Horizontal scroll

<LoadDataOnScroll :has-more-data="hasMore" :on-load="loadMore" direction="horizontal">
  <HorizontalLayout :wrap="false">
    <Card v-for="item in items" :key="item.id">...</Card>
  </HorizontalLayout>
</LoadDataOnScroll>

Table of Contents