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

| event | payload | description | | --------- | ------- | ------------------------------------------------------------------- | | load-more | null | Emitted whenever the user has reached the end of scrollable content |

Props

| prop | type | default | description | | ------------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | | direction | String | down | The direction to scroll in order to load more items. Either 'down', 'up', 'left', or 'right' | | minDistance | Number | 10 | The buffer distance to triger the 'load-more' event in pixels. Increase this if the event is not triggering | | throttleTime | Number | 1000 | The minimum amount of time between triggers of the 'load-more' event in milliseconds. Uses rxjs' 'throttleTime' operator | | repeat | boolean | false | Whether to keep calling 'load-more' after reaching bottom even if user has not scrolled further |