剑客
关注科技互联网

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

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 😀

License

MIT
©EGOIST

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址