vinfinite-scroll-next v1.0.1

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>

License

MIT