Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(useInfiniteScroll): new function (#1219)
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
- Loading branch information
1 parent
eed2889
commit 4f0ad36
Showing
4 changed files
with
105 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
<script setup lang="ts"> | ||
import { ref } from 'vue-demi' | ||
import { useInfiniteScroll } from '.' | ||
const el = ref<HTMLElement | null>(null) | ||
const data = ref([1, 2, 3, 4, 5, 6]) | ||
useInfiniteScroll( | ||
el, | ||
() => { | ||
const length = data.value.length + 1 | ||
data.value.push(...Array.from({ length: 5 }, (_, i) => length + i)) | ||
}, | ||
{ distance: 10 }, | ||
) | ||
</script> | ||
|
||
<template> | ||
<div ref="el" class="flex flex-col gap-2 p-4 w-300px h-300px m-auto overflow-scroll bg-gray-500/5 rounded"> | ||
<div v-for="item in data" :key="item" class="h-30 bg-gray-500/5 rounded p-3"> | ||
{{ item }} | ||
</div> | ||
</div> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
--- | ||
category: Sensors | ||
--- | ||
|
||
# useInfiniteScroll | ||
|
||
Infinite scrolling of the element. | ||
|
||
## Usage | ||
|
||
```html | ||
<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> | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
import type { UnwrapNestedRefs } from 'vue-demi' | ||
import { reactive, watch } from 'vue-demi' | ||
import type { MaybeRef } from '@vueuse/shared' | ||
import type { UseScrollOptions } from '../useScroll' | ||
import { useScroll } from '../useScroll' | ||
|
||
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 function useInfiniteScroll( | ||
element: MaybeRef<HTMLElement | SVGElement | Window | Document | null | undefined>, | ||
onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => void, | ||
options: UseInfiniteScrollOptions = {}, | ||
) { | ||
const state = reactive(useScroll( | ||
element, | ||
{ | ||
...options, | ||
offset: { | ||
bottom: options.distance ?? 0, | ||
...options.offset, | ||
}, | ||
}, | ||
)) | ||
|
||
watch( | ||
() => state.arrivedState.bottom, | ||
(v) => { | ||
if (v) | ||
onLoadMore(state) | ||
}, | ||
) | ||
} |