useInfiniteScroll ​
Infinite scrolling of the element.
Demo ​
Usage ​
html
<script setup lang="ts">
import { ref } 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 } 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>
Directive Usage ​
This function also provides a directive version via the
@vueuse/components
package. Learn more about the usage.
html
<script setup lang="ts">
import { ref } from 'vue'
import { vInfiniteScroll } from '@vueuse/components'
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))
}
</script>
<template>
<div v-infinite-scroll="onLoadMore">
<div v-for="item in data" :key="item">
{{ item }}
</div>
</div>
<!-- with options -->
<div v-infinite-scroll="[onLoadMore, { 'distance' : 10 }]">
<div v-for="item in data" :key="item">
{{ item }}
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { vInfiniteScroll } from '@vueuse/components'
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))
}
</script>
<template>
<div v-infinite-scroll="onLoadMore">
<div v-for="item in data" :key="item">
{{ item }}
</div>
</div>
<!-- with options -->
<div v-infinite-scroll="[onLoadMore, { 'distance' : 10 }]">
<div v-for="item in data" :key="item">
{{ item }}
</div>
</div>
</template>
Source ​
Contributors ​
Changelog ​
v10.3.0
on 7/30/2023v10.2.1
on 6/28/2023v10.1.1
on 5/1/2023v10.0.0-beta.5
on 4/13/2023v10.0.0-beta.4
on 4/13/20234d757
- feat(types)!: rename MaybeComputedRef
to MaybeRefOrGetter
0a72b
- feat(toValue): rename resolveUnref
to toValue
v8.9.4
on 7/17/2022v8.9.1
on 7/8/2022v8.6.0
on 5/31/2022