Kunlun Design简体中文
InfiniteScroll 无限滚动
实现滚动至底部时，加载更多数据。
基础用法
在要实现滚动加载的列表上上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。
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>
禁用加载
在要实现滚动加载的列表上上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。
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 属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| infinite-scroll-disabled | 禁用滚动触底加载 | boolean | false |
| infinite-scroll-immediate | 在内容没有填满容器时立即执行加载方法 | boolean | true |
| infinite-scroll-delay | 节流时延，单位 ms | number | 200 |
| infinite-scroll-distance | 触发加载的距离阈值，单位为 px | number | 0 |