Vue-infinite-scrolling NPM

vue-infinite-scrolling

About

Vue component plugin for infinite-scrolling.

How to use:

!Note: For now it is compatible with Vue3 only.

You can install component like a plugin:

import { createApp } from 'vue'
import App from './App.vue'
import VueInfiniteScrolling from 'vue-infinite-scrolling';

const app = createApp(App);
app.use(VueInfiniteScrolling);
app.mount('#app');

Or you can import it locally inside yours one:

<script lang="ts">
import { VueInfiniteScrolling } from 'vue-infinite-scrolling';
</script>

<template>
  <ul>
    <li
      v-for="i in items"
      :key="i"
    >
      {{ i }}
    </li>

    <VueInfiniteScrolling
      v-bind="{
        isAppendedToBody: true,
        pagination,
        isLoading,
      }"
      @load-more="loadMore"
    />
  </ul>
</template>

Props

Prop name	Type	Is required	Default value	Description
`pagination`	Object	true	-	Interface `VueInfiniteScrollingPagination { limit: number; offset: number; totalItems: number;}`
`isLoading`	Boolean	true	-	Is list loading
`isAppendedToBody`	Boolean	false	false	Add scroll event listener to the body or to the list-element
`listHeight`	String	false	'100%'	List-element max-hight
`scrollOffset`	Number	false	100	Scroll offset in px
`scrollDirection`	String	false	'to-bottom'	Enum `VUE_INFINITE_SCROLLING_DIRECTION`: 'to-bottom', 'to-top'
`scrollGuardTimeout`	Number	false	100	Scroll delay timeout to prevent large number of calls