Kunlun DesignEnglish
InfiniteScroll
Implement scrolling to the bottom, load more data.
Basic usage
Add v-infinite-scroll on the list you want to implement scroll loading and assign the corresponding load method to automatically execute the load method when scrolling to the bottom.
1
2
3
4
5
6
<>
<template>
<div id="scroll" class="kl-infinite-scroll" v-infinite-scroll="load">
<p
class="kl-infinite-scroll--item"
v-for="(item, index) in list"
:key="index"
v-text="item"
></p>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const list = ref<any[]>([1, 2, 3, 4, 5, 6])
const load = () => {
for (let i = 1; i <= 10; i++) {
list.value.push(i)
}
}
</script>
<style></style>
Disable loading
1
2
3
4
5
6
<>
<template>
<div
id="scroll"
class="kl-infinite-scroll"
v-infinite-scroll="load"
:infinite-scroll-disabled="true"
>
<p
class="kl-infinite-scroll--item"
style="background-color: #fff6f6; color: #ff8484"
v-for="(item, index) in list"
:key="index"
v-text="item"
></p>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const list = ref<any[]>([1, 2, 3, 4, 5, 6])
const load = () => {
for (let i = 1; i <= 10; i++) {
list.value.push(i)
}
}
</script>
<style></style>
InfiniteScroll API
InfiniteScroll Attribute
| Attribute Name | Description | type | Default Value |
|---|---|---|---|
| infinite-scroll-disabled | Disable scrolling bottoming | boolean | false |
| infinite-scroll-immediate | The load method executes as soon as the content does not fill the container | boolean | true |
| infinite-scroll-delay | Throttling delay in ms | number | 200 |
| infinite-scroll-distance | The distance threshold at which the load is triggered, in px | number | 0 |