Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aligilan/nuxt-infinitescroll
An infinite scroll for nuxt applications
https://github.com/aligilan/nuxt-infinitescroll
infinite-scroll nuxtjs nuxtjs-infinite-scroll nuxtjs-module
Last synced: 23 days ago
JSON representation
An infinite scroll for nuxt applications
- Host: GitHub
- URL: https://github.com/aligilan/nuxt-infinitescroll
- Owner: aligilan
- Created: 2020-04-10T22:45:52.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-04-11T20:06:47.000Z (over 4 years ago)
- Last Synced: 2024-11-15T21:33:20.801Z (about 1 month ago)
- Topics: infinite-scroll, nuxtjs, nuxtjs-infinite-scroll, nuxtjs-module
- Language: Vue
- Homepage: https://aligilan.ir
- Size: 14.6 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# nuxt-infinitescroll
An infinite scroll for nuxt applications
# Requirements
bootstrap-vue: ^2.9.0
# Install
```Bash
npm install @aligilan/infinitescroll --save
```
# Usage
```Bash
...
modules:[
'@aligilan/infinitescroll'
],
...
```
```Bash
-
-
-
data(){
return{
dataArray: [],
...
//=======infiniteScroll
enough: false,
page: 1,
pageSize: 10,
//=====================
...
}
},
mounted(){
this.getData();
},
methods:{
...
//=======infiniteScroll
async getData(){
try{
let result = await this.$axios.$get(`my-api-url?page=${this.page++}`);
if(result.success == 'true'){
this.dataArray = this.dataArray.concat(result.data);
// Stop scroll-loader
result.data.length < this.pageSize && (this.enough = true);
}
}catch(error){
console.log('error', error)
}
},
//=====================
...
}
```
# Options
| Option | Description |
| ----- | ----- |
| :id | set an id for loader element. |
| :enough | flag to visible loader or hide. |
| :offset | add offset to current page scroll position, before reach loader position. |
# Event
@load-more: When page current scroll position reached loader position, will emit this event.