github.com/logustra/vinscroll

Vinscroll

A minimalist infinite scroll component for vue 2-3

Getting Started

NPM

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

CDN

Drop <script> inside your HTML file.

Vue 3

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31"></script>
<script src="https://cdn.jsdelivr.net/npm/@logustra/vinscroll"></script>

Vue 2

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.4.9"></script>
<script src="https://cdn.jsdelivr.net/npm/@logustra/vinscroll"></script>

Usage

Setup

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)

Basic Usage

<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>

Demo →

In Element

<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>

Demo →

API

Props

Name	Type	Default	Description
element	HTMLElement	null	The HTML of the scrollable element

Events

Name	Listen to	Description
load:more	@load:more	Emitted after the scroll has arrived at the bottom

Cheer me on

If you like my works, you can cheer me on here 😆

    🇮🇩 Trakteer
    🌍 Ko-Fi

License

MIT License © 2022 Faizal Andyka