useInfiniteScroll
实现元素的无限滚动。
示例
使用方法
vue
<script setup lang="ts">
import { useInfiniteScroll } from '@vueuse/core'
import { ref, useTemplateRef } from 'vue'
const el = useTemplateRef<HTMLElement>('el')
const data = ref([1, 2, 3, 4, 5, 6])
const { reset } = useInfiniteScroll(
el,
() => {
// 加载更多
data.value.push(...moreData)
},
{
distance: 10,
canLoadMore: () => {
// inidicate when there is no more content to load so onLoadMore stops triggering
// if (noMoreContent) return false
return true // for demo purposes
},
}
)
function resetList() {
data.value = []
reset()
}
</script>
<template>
<div ref="el">
<div v-for="item in data">
{{ item }}
</div>
</div>
<button @click="resetList()">
Reset
</button>
</template>Direction
Different scroll directions require different CSS style settings:
| Direction | Required CSS |
|---|---|
bottom (default) | No special settings required |
top | display: flex;flex-direction: column-reverse; |
left | display: flex;flex-direction: row-reverse; |
right | display: flex; |
WARNING
确保在没有更多内容可加载时用 canLoadMore 指示，否则只要有空间加载更多内容，onLoadMore 就会被触发。
指令使用
vue
<script setup lang="ts">
import { vInfiniteScroll } from '@vueuse/components'
import { ref } from 'vue'
const data = ref([1, 2, 3, 4, 5, 6])
function onLoadMore() {
const length = data.value.length + 1
data.value.push(...Array.from({ length: 5 }, (_, i) => length + i))
}
function canLoadMore() {
// inidicate when there is no more content to load so onLoadMore stops triggering
// if (noMoreContent) return false
return true // for demo purposes
}
</script>
<template>
<div v-infinite-scroll="onLoadMore">
<div v-for="item in data" :key="item">
{{ item }}
</div>
</div>
<!-- 使用选项 -->
<div v-infinite-scroll="[onLoadMore, { distance: 10, canLoadMore }]">
<div v-for="item in data" :key="item">
{{ item }}
</div>
</div>
</template>类型声明
显示类型声明
ts
type InfiniteScrollElement =
| HTMLElement
| SVGElement
| Window
| Document
| null
| undefined
export interface UseInfiniteScrollOptions<
T extends InfiniteScrollElement = InfiniteScrollElement,
> extends UseScrollOptions {
/**
* 元素底部与视口底部的最小距离
*
* @default 0
*/
distance?: number
/**
* 监听滚动的方向。
*
* @default 'bottom'
*/
direction?: "top" | "bottom" | "left" | "right"
/**
* 两次加载更多之间的时间间隔（用于避免过多的调用）。
*
* @default 100
*/
interval?: number
/**
* 用于确定特定元素是否可以加载更多内容的函数。
* 如果对于给定的元素允许加载更多内容，则应返回 `true`，否则返回 `false`。
*/
canLoadMore?: (el: T) => boolean
}
/**
* Reactive infinite scroll.
*
* @see https://vueuse.org/useInfiniteScroll
*/
export declare function useInfiniteScroll<T extends InfiniteScrollElement>(
element: MaybeRefOrGetter<T>,
onLoadMore: (
state: UnwrapNestedRefs<ReturnType<typeof useScroll>>,
) => Awaitable<void>,
options?: UseInfiniteScrollOptions<T>,
): {
isLoading: ComputedRef<boolean>
reset(): void
}源码
贡献者
一纸忘忧