Vue Infi Scroller

Installation

To install the component, run:

npm install vue-infi-scroller

How to use

To import the component in your project:

import InfiScroller from 'vue-infi-scroller';

Use InfiScroller on the window object:

<template>
  <div>
    <InfiScroller
      :has-more="hasMore"
      :on-load-more="onLoadMore"
    >
      <ul>
        <li
          v-for="item in items"
          :key="item.id"
          style="height: 100px"
        >
          {{ `Item ${item.id}` }}
        </li>
      </ul>
    </InfiScroller>
  </div>
</template>

<script>
  import InfiScroller from 'vue-infi-scroller';

  export default {
    components: { InfiScroller },
    data() {
      return {
        items: this.generateItems(),
        hasMore: true
      };
    },
    methods: {
      generateItems(items = [], length = 30) {
        const nextItems = [...items, ...Array.from({ length })];
        return nextItems.map((item, index) => ({ id: index }));
      },
      onLoadMore() {
        const nextItems = this.generateItems(this.items);
        this.items = nextItems;
        this.hasMore = nextItems.length < 120;
      }
    }
  };
</script>

Use InfiScroller on a custom scroll target (like a modal):

<template>
  <div>
    <div
      ref="scroller"
      class="items-scroller"
    >
      <InfiScroller
        :scroll-target="refScroller"
        :has-more="hasMore"
        :on-load-more="onLoadMore"
      >
        <ul>
          <li
            v-for="item in items"
            :key="item.id"
            style="height: 100px"
          >
            {{ `Item ${item.id}` }}
          </li>
        </ul>
      </InfiScroller>
    </div>
  </div>
</template>

<script>
  import InfiScroller from 'vue-infi-scroller';

  export default {
    components: { InfiScroller },
    data() {
      return {
        refScroller: null,
        items: this.generateItems(),
        hasMore: true
      };
    },
    mounted() {
      this.refScroller = this.$refs.scroller;
    },
    methods: {
      generateItems(items = [], length = 30) {
        const nextItems = [...items, ...Array.from({ length })];
        return nextItems.map((item, index) => ({ id: index }));
      },
      onLoadMore() {
        const nextItems = this.generateItems(this.items);
        this.items = nextItems;
        this.hasMore = nextItems.length < 120;
      }
    }
  };
</script>

<style>
  .items-scroller {
    height: 500px;
    overflow: auto;
    background-color: white;
  }
</style>

Use multiple InfiScroller components with custom scroll targets:

<template>
  <div>
    <div
      ref="itemsScroller"
      class="items-scroller"
    >
      <InfiScroller
        :scroll-target="refItemsScroller"
        :has-more="hasMore"
        :on-load-more="onLoadMoreItems"
      >
        <ul>
          <li
            v-for="item in items"
            :key="item.id"
            style="height: 100px"
          >
            {{ `Item ${item.id}` }}
          </li>
        </ul>
      </InfiScroller>
    </div>

    <div
      ref="otherItemsScroller"
      class="other-items-scroller"
    >
      <InfiScroller
        :scroll-target="refOtherItemsScroller"
        :has-more="hasMoreOther"
        :on-load-more="onLoadMoreOtherItems"
      >
        <ul>
          <li
            v-for="item in otherItems"
            :key="item.id"
            style="height: 100px"
          >
            {{ `Other Item ${item.id}` }}
          </li>
        </ul>
      </InfiScroller>
    </div>
  </div>
</template>

<script>
  import InfiScroller from 'vue-infi-scroller';

  export default {
    components: { InfiScroller },
    data() {
      return {
        refItemsScroller: null,
        refOtherItemsScroller: null,
        items: this.generateItems(),
        otherItems: this.generateItems(),
        hasMore: true,
        hasMoreOther: true
      };
    },
    mounted() {
      this.refItemsScroller = this.$refs.itemsScroller;
      this.refOtherItemsScroller = this.$refs.otherItemsScroller;
    },
    methods: {
      generateItems(items = [], length = 30) {
        const nextItems = [...items, ...Array.from({ length })];
        return nextItems.map((item, index) => ({ id: index }));
      },
      onLoadMoreItems() {
        const nextItems = this.generateItems(this.items);
        this.items = nextItems;
        this.hasMore = nextItems.length < 300;
      },
      onLoadMoreOtherItems() {
        const nextOtherItems = this.generateItems(this.otherItems);
        this.otherItems = nextOtherItems;
        this.hasMoreOther = nextOtherItems.length < 120;
      }
    }
  };
</script>

<style>
  .items-scroller {
    height: 300px;
    overflow: auto;
    background-color: white;
  }

  .other-items-scroller {
    height: 500px;
    margin-top: 40px;
    overflow: auto;
    background-color: white;
  }
</style>

Use InfiScroller with a spinner/loader:

<template>
  <div>
    <InfiScroller
      :has-more="hasMore"
      :on-load-more="onLoadMore"
    >
      <ul>
        <li
          v-for="item in items"
          :key="item.id"
          style="height: 100px"
        >
          {{ `Item ${item.id}` }}
        </li>
      </ul>

      <span v-if="hasMore">Loading...</span>
    </InfiScroller>
  </div>
</template>

<script>
  import InfiScroller from 'vue-infi-scroller';

  export default {
    components: { InfiScroller },
    data() {
      return {
        items: this.generateItems(),
        hasMore: true
      };
    },
    methods: {
      generateItems(items = [], length = 30) {
        const nextItems = [...items, ...Array.from({ length })];
        return nextItems.map((item, index) => ({ id: index }));
      },
      onLoadMore() {
        const nextItems = this.generateItems(this.items);
        this.items = nextItems;
        this.hasMore = nextItems.length < 120;
      }
    }
  };
</script>

Props