Skip to content
Bidirectional infinite-scroll component for Vue.js
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
demo
dist
docs
src
.envrc
.gitignore
README.md
build.config.js
package.json

README.md

v-infinite-scroll

Bidirectional infinite-scroll component for Vue.js

Installation

Using yarn

yarn add v-infinite-scroll

Using npm

npm i --save v-infinite-scroll

Demo

DEMO

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'

import InfiniteScroll from 'v-infinite-scroll'

// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'v-infinite-scroll/dist/v-infinite-scroll.css'

Vue.use(InfiniteScroll)

Browser

<!-- Include after Vue -->
<link rel="stylesheet" href="v-infinite-scroll/dist/v-infinite-scroll.css"></link>
<script src="v-infinite-scroll/dist/v-infinite-scroll.js"></script>
<script>
  Vue.use(InfiniteScroll)
</script>

Example

<template>
  <v-infinite-scroll :loading="loading" @top="prevPage" @bottom="nextPage" :offset='20' style="max-height: 80vh; overflow-y: scroll;">
    <div v-for="item in items">{{item}}</div> // Your content
  </v-infinite-scroll>
</template>

<script>
export default {
  data () {
    return {
      page: 1,
      items: [],
      loading: false
    }
  },
  methods: {
    prevPage () {
      if (this.page == 1) return
      --this.page
      this.api()
    },
    nextPage () {
      ++this.page
      this.api()
    },
    api () {
      this.loading = true
      myApi.get({page: this.page}).then((response) => {
        this.items = response
        this.loading = false
      })
    }
  }
}
</script>

Properties

Name Type Required Default value Info
loading Boolean No Must be true if data is being loaded
offset Number No 0 Distance of top or bottom to emit the events
on-top-scrolls-to-bottom Boolean No True When using bidirectional scroll, automatically scrolls to the bottom after load a previous page

Events

Name Info
top Triggered after the scroll arrives at the top
bottom Triggered after the scroll arrives at the bottom

Author

Daniel Fernando Lourusso

License

This project is licensed under MIT License

You can’t perform that action at this time.