Infinite scroll component for Vue.js 2
Clone or download
jericopulvera and egoist Added JS Fiddle Demo (#26)
* Added JS Fiddle Demo

* Update README.md

* Update README.md

* tweaks
Latest commit 4f4823f Jun 7, 2018
Permalink
Failed to load latest commit information.
__test__ init Oct 21, 2016
example update example Nov 1, 2017
src use element-in-view May 26, 2017
.editorconfig init Oct 21, 2016
.gitattributes init Oct 21, 2016
.gitignore fix: ref not found in nested component (#9) May 10, 2017
LICENSE init Oct 21, 2016
README.md Added JS Fiddle Demo (#26) Jun 7, 2018
circle.yml update circleci Feb 21, 2017
package.json update example Nov 1, 2017
poi.config.js use poi May 3, 2017
yarn.lock update example Nov 1, 2017

README.md

vue-mugen-scroll NPM version NPM downloads Build Status

むげん [mugen] means Infinity in English.

Features

  • Small, only weighs 2kb
  • Insanely easy to use, it's just a component with a couple props

Install

$ npm install --save vue-mugen-scroll

CDN: https://unpkg.com/vue-mugen-scroll/dist/

Demo: JSFiddle

Usage

<template>
  <div id="app">
    <div class="list">your list of items</div>
    <!-- add the component right after your list -->
    <mugen-scroll :handler="fetchData" :should-handle="!loading">
      loading...
    </mugen-scroll>
  </div>
</template>

<script>
  import MugenScroll from 'vue-mugen-scroll'
  export default {
    data() {
      // do not run handler when it's loading
      return {loading: false}
    },
    methods: {
      fetchData() {
        this.loading = true
        // ... the code you wanna run to fetch data
        this.loading = false
      }
    },
    components: {MugenScroll}
  }
</script>

API

props

handler

Type: function
Required: true

The handler function to run after you scroll to the bottom of the list. It will also be invoked on component mounted and the mugen-scroll component is visible in viewport.

handleOnMount

Type: boolean
Default: true

Invoke the handler function on component mounted.

shouldHandle

Type: boolean
Default: true

Add an addtional condition to check if it should invoke the handler function, for example you don't want it to be invoked again as it's loading.

threshold

Type: number
Default: 0

Set the ratio of the <mugen-scroll>'s height and width that needs to be visible for it to be considered in viewport. This defaults to 0, meaning any amount. A threshold of 0.5 or 1 will require that half or all, respectively, of the element's height and width need to be visible. threshold must be a number between 0 and 1

scrollContainer

Type: string

If the container of your list is scrollable, you can specific the reference ID of the container, so that we can detect the scroll event of this element instead of window.

<template>
  <div class="wrap"
    <!-- the container is scrollable here -->
    style="height: 200px; overflow: auto;"
    <!-- add the ref -->
    ref="wrap">
    <div class="list"><!-- your list --></div>
    <mugen-scroll
      <!-- pass the ref id -->
      scroll-container="wrap">
      Loading...
    </mugen-scroll>
  </div>
</template>

Development

You can run the example with vbuild

git clone https://github.com/egoist/vue-mugen-scroll.git
cd vue-mugen-scroll
yarn
yarn example

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

License

MIT © EGOIST