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.

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

<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

import { createApp } from 'vue'
import Vinscroll from '@logustra/vinscroll'
import App from './app.vue'

const app = createApp(App)
app.use(Vinscroll)

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

Cheers me on

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

logustra / vinscroll