useInfiniteScroll
Infinite scrolling of the element.
Demo
1
2
3
4
5
6
Usage
<script setup lang="ts">
import { ref, toRefs } from 'vue'
import { useInfiniteScroll } from '@vueuse/core'
const el = ref<HTMLElement>(null)
const data = ref([1,2,3,4,5,6])
useInfiniteScroll(
el,
() => {
// load more
data.value.push(...moreData)
},
{ distance: 10 }
)
</script>
<template>
<div ref="el">
<div v-for="item in data">
{{ item }}
</div>
</div>
</template>
<script setup lang="ts">
import { ref, toRefs } from 'vue'
import { useInfiniteScroll } from '@vueuse/core'
const el = ref<HTMLElement>(null)
const data = ref([1,2,3,4,5,6])
useInfiniteScroll(
el,
() => {
// load more
data.value.push(...moreData)
},
{ distance: 10 }
)
</script>
<template>
<div ref="el">
<div v-for="item in data">
{{ item }}
</div>
</div>
</template>
Type Declarations
export interface UseInfiniteScrollOptions extends UseScrollOptions {
/**
* The minimum distance between the bottom of the element and the bottom of the viewport
*
* @default 0
*/
distance?: number
}
/**
* Reactive infinite scroll.
*
* @see https://vueuse.org/useInfiniteScroll
*/
export declare function useInfiniteScroll(
element: MaybeRef<
HTMLElement | SVGElement | Window | Document | null | undefined
>,
onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => void,
options?: UseInfiniteScrollOptions
): void
export interface UseInfiniteScrollOptions extends UseScrollOptions {
/**
* The minimum distance between the bottom of the element and the bottom of the viewport
*
* @default 0
*/
distance?: number
}
/**
* Reactive infinite scroll.
*
* @see https://vueuse.org/useInfiniteScroll
*/
export declare function useInfiniteScroll(
element: MaybeRef<
HTMLElement | SVGElement | Window | Document | null | undefined
>,
onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => void,
options?: UseInfiniteScrollOptions
): void
Source
Contributors
wheat
Melih Altıntaş