Repository files navigation

むげん [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-scroll

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

Demo:JSFiddle

<template>  <divid="app">    <divclass="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>importMugenScrollfrom'vue-mugen-scroll'exportdefault {data() {// do not run handler when it's loadingreturn {loading:false}    },    methods: {fetchData() {this.loading=true// ... the code you wanna run to fetch datathis.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 themugen-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 thescroll event of this element instead ofwindow.

<template>  <divclass="wrap"    <!--thecontainerisscrollablehere--><!-- add the ref-->    ref="wrap">    <divclass="list"><!-- your list--></div>    <mugen-scroll      <!--passtherefid-->      scroll-container="wrap">      Loading...    </mugen-scroll>  </div></template>

You can run the example withvbuild

git clone https://github.com/egoist/vue-mugen-scroll.gitcd vue-mugen-scrollyarnyarn example

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

MIT ©EGOIST