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 |

Slots

| Slot name | Description | |-----------|--------------------------------------------------| | default | Default slot. Uses 'Loading...' sign by default. |

Development

Project setup:

Requirements:

• Node >= v16.14.2
• npm >= 8.5.0

Install dependencies:

npm ci

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint

Recommended IDE Setup

• VS Code + Volar