用法
useInfiniteScrollBinding 在 vueuse 的 useInfiniteScroll 之上做了两点优化：
canLoadMore接受MaybeRefOrGetter<boolean>，调用方可以直接传 ref 或 getter，无需手写() => ...闭包。- 返回值原样透传
UseInfiniteScrollReturn（isLoading/reset），并显式暴露direction/interval选项。
<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>
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
No recent changes