Awesome

DEMO & DOCS

Install

1. Install package

npm i @grafikri/vue-infinite-scroll

2. Register it as vue plugin

Don't forget it register before create an Vue instance. here

import VueInfiniteScroll from "@grafikri/vue-infinite-scroll"
Vue.use(VueInfiniteScroll)

3. Start to use it as directive in component

<template>
  <div v-infinite-scroll="{ onEnter, onLeave, distance: 100 }">
    This is my long content
  </div>
</template>

<script>
export default {
  name: "MyCustomComponent",
  methods: {
    onEnter() {
      // do something
    },
    onLeave() {
      // do something
    },
  },
}
</script>

Options

Properties

distance

The distance means space between view's and scroll's bottom positions. The value of distance is pixel.

Default: 200

Required: false

Methods

onEnter

The method when view's bottom appear.

Required: true on DOM

onLeave

The method when view's bottom leave.

Required: true on DOM