https://github.com/logustra/vinscroll

🖱 A minimalist infinite scroll component for vue 2-3
https://github.com/logustra/vinscroll

Last synced: 1 day ago
JSON representation

🖱 A minimalist infinite scroll component for vue 2-3

• Host: GitHub
• URL: https://github.com/logustra/vinscroll
• Owner: logustra
• License: mit
• Created: 2022-05-21T10:25:30.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-09-16T02:52:29.000Z (over 3 years ago)
• Last Synced: 2024-05-01T17:22:13.862Z (almost 2 years ago)
• Language: Vue
• Homepage: https://www.npmjs.com/package/@logustra/vinscroll
• Size: 78.1 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Funding: .github/FUNDING.yml
  • License: license.md

Awesome Lists containing this project

• awesome-vue - vinscroll - A minimalist infinite scroll component (Components & Libraries / UI Components)

README

          
## Vinscroll

[![Codecov](https://img.shields.io/codecov/c/github/logustra/vinscroll)](https://codecov.io/github/logustra/vinscroll?branch=master)

[![Downloads](https://img.shields.io/npm/dm/@logustra/vinscroll)](https://npmcharts.com/compare/@logustra/vinscroll?minimal=true)

[![Version](https://img.shields.io/npm/v/@logustra/vinscroll)](https://www.npmjs.com/package/@logustra/vinscroll)

[![Gzip Size](https://img.badgesize.io/https://unpkg.com/@logustra/vinscroll/dist/index.umd.js?compression=gzip)](https://unpkg.com/@logustra/vinscroll/dist/index.umd.js)

[![License](https://img.shields.io/github/license/logustra/vinscroll)](https://github.com/logustra/vinscroll/blob/master/license.md)

[![Code Style](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

[![Commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli)

> A minimalist infinite scroll component for vue 2-3

## Getting Started

### NPM

```shell

npm install @logustra/vinscroll

```

To make `@logustra/vinscroll` work for Vue 2, you need to have `@vue/composition-api` installed.

```shell

npm install @vue/composition-api

```

### CDN

Drop `` inside your HTML file.

Vue 3

```html

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

```

Vue 2

```html

```

## Usage

### Setup

Vue 3

```js

import { createApp } from 'vue'

import Vinscroll from '@logustra/vinscroll'

import App from './app.vue'

const app = createApp(App)

app.use(Vinscroll)

```

Vue 2

```js

import Vue from 'vue'

import CompositionAPI from '@vue/composition-api'

import Vinscroll from '@logustra/vinscroll'

Vue.use(CompositionAPI)

Vue.use(Vinscroll)

```

### Basic Usage

```html

  

    


      {{ item }}

    

  


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 

    }

  },

}

```

[Demo →](https://stackblitz.com/edit/vitejs-vite-x1g4ac?file=src%2Fcomponents%2FbasicUsage.vue)

### In Element

```html

  

    


      


        {{ item }}

      

    

  


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,

    }

  },

}

```

[Demo →](https://stackblitz.com/edit/vitejs-vite-x1g4ac?file=src%2Fcomponents%2FinElement.vue)

## 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](https://github.com/sponsors/logustra)


    🌍 [Ko-Fi](https://ko-fi.com/logustra)


    🇮🇩 [Trakteer](https://trakteer.id/logustra/tip)


## License

MIT License © 2022 Faizal Andyka