Skip to content

useInfiniteScroll

元素的无限滚动。

¥Infinite scrolling of the element.

示例

用法

¥Usage

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
,
() => { // load more
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

不同的滚动方向需要不同的 CSS 样式设置:

¥Different scroll directions require different CSS style settings:

方向所需 CSS
bottom(默认)无需特殊设置
topdisplay: flex;
flex-direction: column-reverse;
leftdisplay: flex;
flex-direction: row-reverse;
rightdisplay: flex;

警告

确保使用 canLoadMore 指示何时没有更多内容可加载,否则只要有空间容纳更多内容,onLoadMore 就会触发。

¥Make sure to indicate when there is no more content to load with canLoadMore, otherwise onLoadMore will trigger as long as there is space for more content.

指令用法

¥Directive Usage

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-scro
ll="
onLoadMore
">
<
div
v-for="
item
in
data
"
:key
="
item
">
{{
item
}}
</
div
>
</
div
>
<!-- with options --> <
div
v-infinite-scro
ll="
[
onLoadMore
, {
distance
: 10,
canLoadMore
}]
">
<
div
v-for="
item
in
data
"
:key
="
item
">
{{
item
}}
</
div
>
</
div
>
</template>