Infinite Scroll 无限滚动
滚动至底部时自动加载更多数据，支持 SSR、自定义插槽及复杂的滚动容器场景。
基础用法
最简单的异步分页加载。通过 v-model:loading 同步加载状态，finished 锁定加载。
列表项 1
列表项 2
列表项 3
列表项 4
列表项 5
基础用法
自定义提示文字
通过属性快速定制直观的文字交互，提升用户体验。
列表项 1
列表项 2
列表项 3
自定义提示文字
错误状态
当接口响应异常时，展示错误提示并允许用户点击重试。
列表项 1
列表项 2
列表项 3
错误状态
自定义插槽
通过插槽模式，您可以完全控制组件在不同生命周期（加载、完成、错误）下的视觉呈现。
列表项 1
列表项 2
自定义插槽
在 Nuxt 中使用 (SSR)
InfiniteScroll 组件深度适配 Nuxt 3/4。在 SSR 模式下，组件会智能处理水合逻辑，并在客户端自动启动 IntersectionObserver。
Nuxt SSR 支持
业务实战：电商商品列表
在真实的电商场景中，列表往往包含复杂的卡片布局。通过配合 fetch 或 useFetch，可以轻松实现高性能的商品瀑布流。
电商商品列表实战
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| loading | 是否正在加载（支持 v-model） | boolean | false |
| finished | 是否已加载完全部数据 | boolean | false |
| error | 是否加载失败（支持 v-model） | boolean | false |
| threshold | 触发加载的距离阈值 (px) | number | 100 |
| direction | 滚动方向 | 'vertical' | 'horizontal' | 'vertical' |
| loading-text | 加载中的提示文字 | string | '加载中...' |
| finished-text | 加载完成的提示文字 | string | '没有更多了' |
| error-text | 加载失败的提示文字 | string | '加载失败，点击重试' |
| immediate-check | 是否在初始化时立即检查是否需要加载 | boolean | true |
| disabled | 是否禁用滚动加载 | boolean | false |
| target | 指定滚动容器选择器 | string | '' |
| use-observer | 是否使用 IntersectionObserver（推荐开启） | boolean | true |
| root-margin | IntersectionObserver 的 rootMargin 配置 | string | '0px' |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| load | 触发加载更多时调用 | () |
| update:loading | 更新 loading 状态 | (val: boolean) |
| update:error | 更新 error 状态 | (val: boolean) |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 列表主体内容 |
| loading | 自定义加载中状态的内容 |
| finished | 自定义加载完成状态的内容 |
| error | 自定义加载失败状态的内容（点击可触发重试） |
Expose
| 名称 | 说明 | 类型 |
|---|---|---|
| check | 手动检查是否需要加载 | () => void |
| retry | 重试加载（清除 error 状态并触发 load） | () => void |
主题变量 (CSS Variables)
| 变量名 | 默认值 | 描述 |
|---|---|---|
--yh-color-text-secondary | #86868b | 加载中文字颜色 |
--yh-color-text-placeholder | #c0c4cc | 加载完成文字颜色 |
--yh-color-danger | #f56c6c | 错误状态文字颜色 |