Infinite Scroll

Automatically loads more data when scrolling to the bottom, supporting SSR, custom slots, and complex scroll container scenarios.

Basic Usage

The simplest asynchronous paginated load. Synchronize loading status via v-model:loading and lock loading with finished.

Item 1

Item 2

Item 3

Item 4

Item 5

Basic Usage

Custom Tip Text

Quickly customize intuitive text interaction via attributes to improve user experience.

Item 1

Item 2

Item 3

Custom Tip Text

Error State

When the interface response is abnormal, display an error tip and allow users to click to retry.

Item 1

Item 2

Item 3

Error State

Custom Slots

With slot mode, you have complete control over the visual presentation during different lifecycle states (loading, finished, error).

Item 1

Item 2

Custom Slots

Use in Nuxt (SSR)

The InfiniteScroll component is deeply adapted for Nuxt 3/4. In SSR mode, the component intelligently handles hydration logic and automatically starts IntersectionObserver on the client.

Nuxt SSR Support

Real-world Scenario: E-commerce Product List

In real e-commerce scenarios, lists often contain complex card layouts. Combining with fetch or useFetch, you can easily implement a high-performance product waterfall flow.

E-commerce Product List Scenario

API

Props

Prop	Description	Type	Default
loading	Whether it is loading (supports v-model)	boolean	false
finished	Whether all data has been loaded	boolean	false
error	Whether loading failed (supports v-model)	boolean	false
threshold	Distance threshold (px) to trigger loading	number	100
direction	Scroll direction	'vertical' | 'horizontal'	'vertical'
loading-text	Loading tip text	string	'Loading...'
finished-text	Finished tip text	string	'No more items'
error-text	Error tip text	string	'Load failed, click to retry'
immediate-check	Whether to check loading immediately on initialization	boolean	true
disabled	Whether to disable scroll loading	boolean	false
target	Specifies the scroll container selector	string	''
use-observer	Whether to use IntersectionObserver (recommended)	boolean	true
root-margin	IntersectionObserver rootMargin config	string	'0px'

Events

Event Name	Description	Callback Parameters
load	Called when more data should be loaded	()
update:loading	Updates loading status	(val: boolean)
update:error	Updates error status	(val: boolean)

Slots

Slot Name	Description
default	Main list content
loading	Custom content for loading status
finished	Custom content for finished status
error	Custom content for error status (click to retry)

Expose

Name	Description	Type
check	Manually check if loading is needed	() => void
retry	Retry loading (clears error state and triggers load)	() => void

Theme Variables (CSS Variables)

Variable	Default	Description
--yh-color-text-secondary	#86868b	Loading text color
--yh-color-text-placeholder	#c0c4cc	Finished text color
--yh-color-danger	#f56c6c	Error state text color