Skip to content

logustra/vinscroll

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

9 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Vinscroll

Codecov Downloads Version Gzip Size License Code Style Commitizen

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/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/@logustra/vinscroll"></script>

Vue 2

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></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

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

License

MIT License ยฉ 2022 Faizal Andyka