Home

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

DirectiveTypeDefault
listArrayrequiredList of items
tombstoneBooleanfalseWhether to show tombstones
sizeNumber10The number of items added each time
offsetNumber200The number of pixels of additional length to allow scrolling to
loadmoreFunctionrequiredThe function of loading more items
spinnerBooleantrueWhether to show loading spinner
nomoreBooleanfalseWhether 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