vinfinite-scroll-next
v1.0.1
Published
infinite scroll component for Vue.js applications
Downloads
2
Readme
Vinfinite Scroll
For the Vue2 version, go here.
Infinite scroll component for Vue.js
- 🟩 Easy to use
- 🟩 SSR compatible
Installation
yarn add vinfinite-scroll-next
# or using npm:
npm install vinfinite-scroll-next
Usage
Import the component
import VinfiniteScrollNext from 'vinfinite-scroll-next'
Add the component to the end of the list you want to use
Every time the scroll position reaches vinfinite-scroll
, the notifyEndReached
is invoked.
<div class="list">
<div v-for="(item) in list" :key="item">
{{ item }}
</div>
<vinfinite-scroll-next @notifyEndReached="notify"></vinfinite-scroll-next>
</div>
Add data to the previous list whenever scroll is reached (Composition API)
const notify = () => {
list.value = list.value.concat(Array.from({length: 100}, (v, k) => k + 1 + list.value.length))
}
Complete example
<template>
<div class="list">
<div v-for="(item) in list" :key="item">
{{ item }}
</div>
<vinfinite-scroll-next @notifyEndReached="notify"></vinfinite-scroll-next>
</div>
</template>
<script>
import VinfiniteScrollNext from 'vinfinite-scroll-next'
import { onMounted, ref } from "vue"
export default {
name: 'App',
components: {
VinfiniteScrollNext
},
setup() {
let list = ref([])
onMounted(() => {
list.value = Array.from({length: 100}, (v, k) => k + 1)
})
const notify = () => {
list.value = list.value.concat(Array.from({length: 100}, (v, k) => k + 1 + list.value.length))
}
return {
list, notify
}
}
}
</script>