# InfiniteScroll

The InfiniteScroll component expects you to do tell it two things at a minimum:

  • What to render:: You do this by setting the items-prop. The items should be an array of objects with an id-field.
  • How to render a single item: You do this by providing the scoped default slot. By default, InfiniteScroll expects the items-array to contain objects that have a least an id-property. You can override this by setting the keyField-prop.

Slot Props

The default slot you have to provide receives several slot-props:

  • item: The item that should be rendered
  • index: The index (type: Number) of the item
  • active: A boolean value that is true the item is currently active. An item is considered active when it is currently beeing positioned by the virtualization library (opens new window) that is used under the hood.

# Props

# keyField

Type: String

Default: id

Name of property that uniquely identifies an item.

# minItemSize

Type: Number

Default: 18

Minimal size of the items (in px). Will be passed onto DynamicScroller.

# items

Type: Array

Default: []

Items to be rendered by the infinite scroll component. Each item must have a unique identifier. You can specify the name of the identifying property by using the key-field-prop.

# loadMore

Type: Function

Default: not specified

Function to be called when the list needs more items from you. This function is called with a callback parameter that you MUST call at some point with additional items.

# Slots

# before scoped

# default scoped

# after scoped

# Events

# scrollPosition

Arguments:

none

# Methods

# scrollToIndex

Scrolls the list to the item at index.

Arguments:

  • index The row index of the item you want to scroll to.
Playground