Installation
npm install @kurtliao/vue-infinite-scroll
or
yarn add @kurtliao/vue-infinite-scroll
Usage
Import globally
import InfiniteScroll from "@kurtliao/vue-infinite-scroll";
const app = createApp(App);
app.directive("InfiniteScroll", InfiniteScroll);
Simple
<template>
<ul class="list" v-infinite-scroll="loadMore">
<li class="row" v-for="item in items">{{ item }}</li>
</ul>
</template>
<script setup>
const loadMore = () => {
// call your api here to load more data
}
</script>
<style>
.list {
height: 300px;
overflow: auto; // make sure the element has overflow style
}
.row {
height: 200px;
}
</style>
Optional
infinite-scroll-disabled
<template>
<ul class="list" v-infinite-scroll="loadMore" :infinite-scroll-disabled="hasNoMore">
<li v-for="item in items">{{ item }}</li>
</ul>
</template>
<script setup>
const hasNoMore = ref(false)
const loadMore = () => {
// call your api here to load more data
...
// if no more data
hasNoMore.value = true
}
</script>
infinite-scroll-delay
<template>
<!-- set delay for throttle milliseconds, default is 300ms -->
<ul class="list" v-infinite-scroll="loadMore" infinite-scroll-delay="1000">
<li v-for="item in items">{{ item }}</li>
</ul>
</template>
<script setup>
const loadMore = () => {
// call your api here to load more data
...
}
</script>