National Poetry Month

    vue-mugen-scroll

    0.2.6 • Public • Published

    vue-mugen-scroll NPM version NPM downloads Build Status

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

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

    Demo: JSFiddle

    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 component mounted and the mugen-scroll component is visible in viewport.

    handleOnMount

    Type: boolean
    Default: true

    Invoke the handler function on component mounted.

    shouldHandle

    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.

    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

    scrollContainer

    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>

    Development

    You can run the example with vbuild

    git clone https://github.com/egoist/vue-mugen-scroll.git
    cd vue-mugen-scroll
    yarn
    yarn example

    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

    Install

    npm i vue-mugen-scroll

    DownloadsWeekly Downloads

    7,803

    Version

    0.2.6

    License

    MIT

    Unpacked Size

    15.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • egoist
    • rem