适用于 Vue 2 的无限下拉组件

vue-mugen-scroll むげん [mugen]means Infinity in English Features Smal

vue-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

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 page loaded and the mugen-scrollcomponent is visible in viewport.

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

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

未登录用户
全部评论0
到底啦