Skip to content

grafikri/vue-infinite-scroll

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

49 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue infinite scroll demo

Install

  1. Install package
npm i @grafikri/vue-infinite-scroll
  1. 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)
  1. 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