vue-recyclist

Infinite scroll list for Vue.js (v2.1+) with DOM recycling.

View demo Download Source

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

GitHub