A minimalist infinite scroll component for vue 2-3
npm install @logustra/vinscroll
To make @logustra/vinscroll
work for Vue 2, you need to have @vue/composition-api
installed.
npm install @vue/composition-api
Drop <script>
inside your HTML file.
Vue 3
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/@logustra/vinscroll"></script>
Vue 2
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/@logustra/vinscroll"></script>
Vue 3
import { createApp } from 'vue'
import Vinscroll from '@logustra/vinscroll'
import App from './app.vue'
const app = createApp(App)
app.use(Vinscroll)
Vue 2
import Vue from 'vue'
import CompositionAPI from '@vue/composition-api'
import Vinscroll from '@logustra/vinscroll'
Vue.use(CompositionAPI)
Vue.use(Vinscroll)
<template>
<vinscroll
@load:more="onLoadMore"
>
<div
v-for="item in items"
:key="item"
>
{{ item }}
</div>
</vinscroll>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const items = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
function onLoadMore() {
const length = items.value.length + 1
items.value.push(...Array.from({ length: 5 }, (_, index) => length + index))
}
return {
items,
onLoadMore
}
},
}
</script>
<template>
<Vinscroll
:element="elScroll"
@load:more="onLoadMore"
>
<div
ref="elScroll"
style="height: 200px; overflow: auto;"
>
<div
v-for="item in items"
:key="item"
>
{{ item }}
</div>
</div>
</Vinscroll>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const elScroll = ref(null)
const items = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
function onLoadMore() {
const length = items.value.length + 1
items.value.push(...Array.from({ length: 5 }, (_, index) => length + index))
}
return {
elScroll,
items,
onLoadMore,
}
},
}
</script>
Name | Type | Default | Description |
---|---|---|---|
element | HTMLElement |
null |
The HTML of the scrollable element |
Name | Listen to | Description |
---|---|---|
load:more | @load:more |
Emitted after the scroll has arrived at the bottom |
Love my works? give me ๐ or cheers me on here ๐
Your support means a lot to me. It will help me sustain my projects actively and make more of my ideas come true.
Much appreciated! โค๏ธ ๐
ย ย ๐ Github
ย ย ๐ Ko-Fi
ย ย ๐ฎ๐ฉ Trakteer
MIT License ยฉ 2022 Faizal Andyka