适用于 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-scroll

component 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
到底啦