Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xtongs/vue-recyclist
Infinite scroll list for Vue.js with DOM recycling.
https://github.com/xtongs/vue-recyclist
infinite-scroll vue vue-recyclist
Last synced: 2 months ago
JSON representation
Infinite scroll list for Vue.js with DOM recycling.
- Host: GitHub
- URL: https://github.com/xtongs/vue-recyclist
- Owner: xtongs
- License: mit
- Archived: true
- Created: 2017-02-17T01:50:34.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-02T04:29:44.000Z (over 6 years ago)
- Last Synced: 2024-10-21T18:07:43.087Z (3 months ago)
- Topics: infinite-scroll, vue, vue-recyclist
- Language: JavaScript
- Homepage: https://xtongs.github.io/vue-recyclist/
- Size: 887 KB
- Stars: 262
- Watchers: 10
- Forks: 60
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-recyclist - recyclist?style=social) - vuejs无限滚动列表 (实用库)
- awesome-github-vue - vue-recyclist - vuejs无限滚动列表 (实用库)
- awesome-github-vue - vue-recyclist - vuejs无限滚动列表 (实用库)
- awesome - vue-recyclist - vuejs无限滚动列表 (实用库)
README
# vue-recyclist (not maintained)
> Infinite scroll list for Vue.js (v2.1+) with DOM recycling.
## [Demo](https://xtongs.github.io/vue-recyclist/)
## Installation
###
``` bash
npm install -D vue-recyclist
```
## Import
``` javascript
import VueRecyclist from 'vue-recyclist'
export default {
...
components: {
VueRecyclist,
},
...
}
```
or
``` html
```
## Usage
``` html
...
...
...
Loading...
No More Data
...
import VueRecyclist from 'vue-recyclist'
export default {
data() {
...
},
components: {
'vue-recyclist': VueRecyclist
},
methods: {
loadmore() {
// Fetch more items
...
}
}
}
```
## Options
| Directive | Type | Default | |
| --------- | ---------| -------- | --------------------------------------------------------------- |
| list | Array | required | List of items |
| tombstone | Boolean | false | Whether to show tombstones |
| size | Number | 10 | The number of items added each time |
| offset | Number | 200 | The number of pixels of additional length to allow scrolling to |
| loadmore | Function | required | The function of loading more items |
| spinner | Boolean | true | Whether to show loading spinner |
| nomore | Boolean | false | Whether to show 'no more data' status bar |
## Development
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```