Awesome
vue-recyclist (not maintained)
Infinite scroll list for Vue.js (v2.1+) with DOM recycling.
Demo
Installation
npm install -D vue-recyclist
Import
import VueRecyclist from 'vue-recyclist'
export default {
...
components: {
VueRecyclist,
},
...
}
or
<script src="/path/to/vue-recyclist/dist/vue-recyclist.js"></script>
Usage
<template>
<div>
...
<vue-recyclist
:list = "list"
:tombstone = "tombstone"
:size = "size"
:offset = "offset"
:loadmore = "loadmore"
:spinner = "spinner"
:nomore = "nomore">
<!-- tombstone slot -->
<template slot="tombstone" scope="props">
...
</template>
<!-- item slot -->
<template slot="item" scope="props">
...
</template>
<!-- loading spinner -->
<div slot="spinner">Loading...</div>
<!-- end of list -->
<div slot="nomore">No More Data</div>
</vue-recyclist>
...
</div>
</template>
<script>
import VueRecyclist from 'vue-recyclist'
export default {
data() {
...
},
components: {
'vue-recyclist': VueRecyclist
},
methods: {
loadmore() {
// Fetch more items
...
}
}
}
</script>
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
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build