https://github.com/kurt-liao/vue-infinite-scroll

An Infinite scroll directive for vue/vue3.
https://github.com/kurt-liao/vue-infinite-scroll

directive infinite-scroll typescript vite vue

Last synced: 20 days ago
JSON representation

An Infinite scroll directive for vue/vue3.

• Host: GitHub
• URL: https://github.com/kurt-liao/vue-infinite-scroll
• Owner: kurt-liao
• License: mit
• Created: 2022-07-08T08:17:16.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-08-26T05:52:07.000Z (over 2 years ago)
• Last Synced: 2024-12-20T22:46:11.167Z (21 days ago)
• Topics: directive, infinite-scroll, typescript, vite, vue
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@kurtliao/vue-infinite-scroll
• Size: 1.56 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  





  

  

  

  





   Issue 

  .

   Feature 



## Demo

[Try it online](https://stackblitz.com/edit/vue-infinite-scroll-demo)



## Installation

```

npm install @kurtliao/vue-infinite-scroll

or

yarn add @kurtliao/vue-infinite-scroll

```

## Usage

### Import globally

```js

import InfiniteScroll from "@kurtliao/vue-infinite-scroll";

const app = createApp(App);

app.directive("InfiniteScroll", InfiniteScroll);

```

### Basic

| Name | Type | Required |

| --- | --- | --- |

| v-infinite-scroll | function | true |

```vue

  


    
{{ item }}

  


const loadMore = () => {

  // call your api here to load more data

}

.list {

  height: 300px;

  overflow: auto;

}

.row {

  height: 200px;

}

```

### Optional

| Name | Type | Required | Default |

| --- | --- | --- | --- |

| infinite-scroll-disabled | boolean | false | false |

```vue

  


    
{{ item }}

  


const hasNoMore = ref(false)

const loadMore = () => {

  // call your api here to load more data

  ...

  

  // if no more data

  hasNoMore.value = true

}

```

| Name | Type | Required | Default |

| --- | --- | --- | --- |

| infinite-scroll-delay | number | false | 300(ms) |

```vue

  

  


    
{{ item }}

  


const loadMore = () => {

  // call your api here to load more data

  ...

}

```

---

Contributions welcome! Also ⭐