vue-recyclist

vue-recyclist

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

Development

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build