JarCastingvue-mugen-scroll 
むげん [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 additional 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
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D