---
title: "useInfiniteScrollBinding"
description: "对 vueuse useInfiniteScroll 的薄包装，允许 canLoadMore 以 ref/getter 形式传入，并透传 direction / interval 等原生选项。"
seo_title: "useInfiniteScrollBinding"
seo_description: "A Vue composable wrapping VueUse useInfiniteScroll, adding a reactive canLoadMore guard so you control exactly when more items are fetched."
canonical_url: "https://core.mhaibaraai.cn/docs/composables/use-infinite-scroll-binding"
---
# useInfiniteScrollBinding

> 对 vueuse useInfiniteScroll 的薄包装，允许 canLoadMore 以 ref/getter 形式传入，并透传 direction / interval 等原生选项。

## 用法

`useInfiniteScrollBinding` 在 vueuse 的 [`useInfiniteScroll`](https://vueuse.org/core/useInfiniteScroll/){rel="[\"nofollow\"]"} 之上做了两点优化：

1. `canLoadMore` 接受 `MaybeRefOrGetter<boolean>`，调用方可以直接传 ref 或 getter，无需手写 `() => ...` 闭包。
2. 返回值原样透传 `UseInfiniteScrollReturn`（`isLoading` / `reset`），并显式暴露 `direction` / `interval` 选项。

```vue
<script setup lang="ts">
import { useInfiniteScrollBinding } from '@movk/core'
import { ref, useTemplateRef } from 'vue'

const listRef = useTemplateRef<HTMLElement>('listRef')
const hasMore = ref(true)

async function fetchNextPage() {
  // 加载下一页
}

const { isLoading, reset } = useInfiniteScrollBinding(
  () => listRef.value,
  {
    distance: 100,
    canLoadMore: hasMore,
    onLoadMore: fetchNextPage,
  },
)
</script>

<template>
  <div ref="listRef" class="overflow-auto">
    <!-- list items -->
  </div>
</template>
```

> \[\!WARNING\]
> 
> distance
> 
>  在 vueuse 内部仅在初始化阶段读取一次，运行时变化不会生效。因此即便参数类型为 
> 
> MaybeRefOrGetter<number>
> 
> ，也只是为了方便调用方写法，不代表真正的响应式行为。

## API

### `useInfiniteScrollBinding(getEl, options)`

### 参数

**getEl** (`() => HTMLElement | null | undefined`) *required*: 返回滚动容器元素的 getter。

**options** (`UseInfiniteScrollBindingOptions`) *required*: 配置项。

#### `UseInfiniteScrollBindingOptions`

**distance** (`MaybeRefOrGetter<number>`) *required*: 触发加载的距离阈值（px）。

**onLoadMore** (`() => void | Promise<void>`) *required*: 到达阈值时触发的回调，支持异步。

**canLoadMore** (`MaybeRefOrGetter<boolean>`): 是否允许继续加载。

**direction** (`'top' | 'bottom' | 'left' | 'right'`): 触发方向。

**interval** (`number`): 两次触发之间的最小间隔（ms）。

### 返回值

**isLoading** (`ComputedRef<boolean>`): vueuse 内部的加载状态。

**reset** (`() => void`): 重置内部状态，便于在数据源切换时重新启用无限滚动。

## Changelog

See commit history for [src/composables/useInfiniteScrollBinding.ts](https://github.com/mhaibaraai/movk-core/commits/main/src/composables/useInfiniteScrollBinding.ts).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.