むげん [mugen] means Infinity in English.
- Small, only weighs 2kb
- Insanely easy to use, it's just a component with a couple props
$ npm install --save vue-mugen-scrollCDN: https://unpkg.com/vue-mugen-scroll/dist/
Demo: JSFiddle
<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>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.
Type: boolean
Default: true
Invoke the handler function on component mounted.
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.
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
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>You can run the example with vbuild
git clone https://github.com/egoist/vue-mugen-scroll.git
cd vue-mugen-scroll
yarn
yarn example- 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent