Miss any of our Open RFC calls?Watch the recordings here! »

jj-infinite-loader

1.0.1 • Public • Published

jj-infinite-loader

an infinite loader built for your vue app #EASY to use #EASY to customize

install

you can install via npm

npm i jj-infinite-loader

how-to-use

  1. import

    import InfiniteLoader from 'jj-infinite-loader'

  2. install this component

    components: {
        InfiniteLoader,
      },
  3. Append it to your component (usually a list component), just add it to the tail of the list

  4. add your callback function to load and add data to expand the list

    <infinite-loader :height="'2rem'" :color="'red'" :busy="busy" @load="callback"></infinite-loader>

    💖IMPORTANT

    to make jj-infinite-loader works properly. In your callback function, you have to bind busy props to a variable, and set this variable to True before you do the load and add data job. And remember to set it to False when you have added new data to the list

    like this:

    callback(){
          let self = this
          this.busy = true
          setTimeout(() => {
            self.items = [...self.items,'add','item','to','list']
            self.busy = false
            
          }, 200);
        }
  5. Customise the height and the color of jj-infinite-loader user height and color props, notice that these 2 props are in type String

DEMO

find more details in demo folder, unzip it and run it like a standerd vue app

Install

npm i jj-infinite-loader

DownloadsWeekly Downloads

3

Version

1.0.1

License

MIT

Unpacked Size

46 kB

Total Files

9

Last publish

Collaborators

  • avatar