Note

This documentation describes the ViewModelLoadDataOnScroll Vue component for native UI views, this component does not have a direct equivalent in Xml templates but can be implemented using LoadDataOnScroll and custom ViewModel logic.

ViewModelLoadDataOnScroll

A ViewModel-integrated wrapper around LoadDataOnScroll. Automatically reads hasMoreData and calls loadMoreData() from the injected ViewModel.

Import

import { ViewModelLoadDataOnScroll } from '@neos/app'

Props

Prop	Type	Default	Description
`direction`	`'vertical' \\| 'horizontal'`	`'vertical'`	Scroll direction to monitor

Slots

Slot	Description
`default`	The scrollable content

Usage Examples

Infinite scroll list with ViewModel data

<ViewModelLoadDataOnScroll>
  <VirtualRepeat :data="viewModel.datasource">
    <template v-slot="{ item }">
      <HorizontalLayout space="small" style="padding: 8px">
        <Text>{{ item.name }}</Text>
      </HorizontalLayout>
    </template>
  </VirtualRepeat>
</ViewModelLoadDataOnScroll>

Horizontal scroll

<ViewModelLoadDataOnScroll direction="horizontal">
  <HorizontalLayout :wrap="false">
    <Card v-for="item in viewModel.datasource" :key="item.id">...</Card>
  </HorizontalLayout>
</ViewModelLoadDataOnScroll>

Table of Contents