https://github.com/grafikri/vue-infinite-scroll
Infinite scroll for Vue
https://github.com/grafikri/vue-infinite-scroll
Last synced: about 2 months ago
JSON representation
Infinite scroll for Vue
- Host: GitHub
- URL: https://github.com/grafikri/vue-infinite-scroll
- Owner: grafikri
- Created: 2020-06-14T10:07:26.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-05T00:31:43.000Z (almost 3 years ago)
- Last Synced: 2025-03-17T08:47:27.301Z (9 months ago)
- Language: JavaScript
- Homepage: https://vue-infinite-scroll.netlify.app/
- Size: 556 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - @grafikri/vue-infinite-scroll - Infinite scroll for Vue (UI Components [🔝](#readme))
- awesome-vue - @grafikri/vue-infinite-scroll - Basic infinite scroll for Vue (Components & Libraries / UI Components)
README
### [DEMO & DOCS](https://vue-infinite-scroll.netlify.app/)
## Install
1. Install package
```bash
npm i @grafikri/vue-infinite-scroll
```
2. Register it as vue plugin
> Don't forget it register before create an Vue instance. [here](https://vuejs.org/v2/guide/plugins.html#Using-a-Plugin)
```js
import VueInfiniteScroll from "@grafikri/vue-infinite-scroll"
Vue.use(VueInfiniteScroll)
```
3. Start to use it as directive in component
```vue
This is my long content
export default {
name: "MyCustomComponent",
methods: {
onEnter() {
// do something
},
onLeave() {
// do something
},
},
}
```
## Options
### Properties
#### distance
The distance means space between view's and scroll's bottom positions. The value of distance is pixel.
_Default:_ `200`
> Required: `false`
### Methods
#### onEnter
The method when view's bottom appear.
> Required: `true` on DOM
#### onLeave
The method when view's bottom leave.
> Required: `true` on DOM