@tygr/vue-infinite-scroll

Vue Infinite Scroll

Demo

Installation

Node

npm i --save @tygr/vue-infinite-scroll

Register the component:

import InfiniteScroll from '@tygr/vue-infinite-scroll';

export default {
  components: {
    'infinite-scroll': InfiniteScroll
  }
}

Browser

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/@tygr/vue-infinite-scroll/dist/vue-infinite-scroll.min.js"></script>
<script>
  // Register the plugin globally
  Vue.use(InfiniteScroll.default)
</script>

Usage

By default it will have 'overflow: scroll' and 'display: flex' in the correct directions based on the 'direction' prop

For vertical scrolling (direction = 'down' | 'up'), a specified height is necessary. By default it is 200 px.

<template>
  <infinite-scroll @load-more="loadMore">
    <div v-for="i in numElements">Element {{ i }}</div>
  </infinite-scroll>
</template>

<script>
  export default {
    data: {
      numElements: 50
    },
    methods: {
      loadMore() {
        numElements += 50;
      }
    }
  }
</script>

Events

Props