vue-infinite-scroll

An infinite scroll directive for vue.js.

2,854

415

2,854

View on GitHub View on NPM

Top Related Projects

vue-lazyload

7,988

A Vue.js plugin for lazyload your Image or Component in your application.

Quick Overview

Vue-infinite-scroll is a lightweight Vue.js directive for implementing infinite scroll functionality in web applications. It allows developers to easily add endless scrolling to their Vue-based projects, automatically loading more content as the user scrolls down the page.

Pros

Simple integration with Vue.js projects
Customizable options for triggering and handling scroll events
Lightweight and performant
Compatible with Vue 2 and Vue 3

Cons

Limited built-in features compared to more comprehensive infinite scroll libraries
Requires manual implementation of content loading logic
Documentation could be more extensive
Not actively maintained (last update was in 2021)

Code Examples

Basic usage:

<template>
  <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <!-- Your list items here -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      busy: false
    }
  },
  methods: {
    loadMore() {
      this.busy = true
      // Fetch more data and update your list
      // Set busy to false when done
    }
  }
}
</script>

Using with a custom scroll container:

<template>
  <div class="scroll-container" v-infinite-scroll="loadMore" infinite-scroll-listen-for-event="scrollEvent">
    <!-- Your list items here -->
  </div>
</template>

<script>
export default {
  methods: {
    loadMore() {
      // Load more items
    },
    triggerScroll() {
      this.$emit('scrollEvent')
    }
  }
}
</script>

Implementing a loading indicator:

<template>
  <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <!-- Your list items here -->
    <div v-if="busy" class="loading-indicator">Loading...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      busy: false
    }
  },
  methods: {
    loadMore() {
      this.busy = true
      setTimeout(() => {
        // Simulate loading more items
        this.busy = false
      }, 1000)
    }
  }
}
</script>

Getting Started

Install the package:
```
npm install vue-infinite-scroll
```

Import and use the directive in your Vue app:

import Vue from 'vue'
import infiniteScroll from 'vue-infinite-scroll'

Vue.use(infiniteScroll)

Use the directive in your component:

<template>
  <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <!-- Your list items here -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      busy: false
    }
  },
  methods: {
    loadMore() {
      // Implement your logic to load more items
    }
  }
}
</script>

Competitor Comparisons

vue-scroller

1,789

Scroller Component for Vue.js

Pros of vue-scroller

More comprehensive scrolling solution with pull-to-refresh and infinite loading
Supports both vertical and horizontal scrolling
Offers customizable animations and styles

Cons of vue-scroller

Larger bundle size due to more features
Steeper learning curve for implementation
Less frequently updated compared to vue-infinite-scroll

Code Comparison

vue-scroller:

<scroller :on-refresh="refresh" :on-infinite="infinite">
  <div v-for="item in items">{{ item }}</div>
</scroller>

vue-infinite-scroll:

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  <div v-for="item in items">{{ item }}</div>
</div>

Summary

vue-scroller offers a more feature-rich scrolling solution with support for pull-to-refresh and horizontal scrolling, making it suitable for complex scrolling needs. However, it comes with a larger bundle size and may require more setup time.

vue-infinite-scroll, on the other hand, provides a simpler and more lightweight solution focused specifically on infinite scrolling. It's easier to implement and has a smaller footprint, but lacks some of the advanced features found in vue-scroller.

Choose vue-scroller for comprehensive scrolling functionality or vue-infinite-scroll for a streamlined infinite scrolling experience in Vue applications.

vue-lazyload

7,988

A Vue.js plugin for lazyload your Image or Component in your application.

Pros of vue-lazyload

More versatile, supporting lazy loading for images, components, and custom elements
Offers advanced features like error handling, loading state, and preloading
Actively maintained with regular updates and bug fixes

Cons of vue-lazyload

Slightly more complex setup and configuration compared to vue-infinite-scroll
May have a larger footprint due to its additional features

Code Comparison

vue-lazyload:

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

vue-infinite-scroll:

Vue.use(infiniteScroll)
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  ...
</div>

vue-lazyload offers more configuration options and flexibility, while vue-infinite-scroll provides a simpler implementation focused specifically on infinite scrolling functionality. vue-lazyload is better suited for projects requiring comprehensive lazy loading capabilities, whereas vue-infinite-scroll is ideal for straightforward infinite scrolling implementations.

vue-awesome-swiper

12,806

🏆 Swiper component for @vuejs

Pros of vue-awesome-swiper

More feature-rich, offering a wide range of swiper functionalities
Better documentation and examples
Actively maintained with regular updates

Cons of vue-awesome-swiper

Larger bundle size due to more features
Steeper learning curve for basic implementations
May be overkill for simple scrolling needs

Code Comparison

vue-awesome-swiper:

<template>
  <swiper :options="swiperOption">
    <swiper-slide v-for="slide in slides" :key="slide.id">
      {{ slide.content }}
    </swiper-slide>
  </swiper>
</template>

vue-infinite-scroll:

<template>
  <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <div v-for="item in items" :key="item.id">{{ item.name }}</div>
  </div>
</template>

vue-awesome-swiper offers more customization options and is suited for complex carousel-like implementations, while vue-infinite-scroll is simpler and focused specifically on infinite scrolling functionality. The choice between the two depends on the specific requirements of your project and the level of complexity needed for the scrolling or swiping feature.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

vue-infinite-scroll

vue-infinite-scroll is an infinite scroll directive for vue.js.

Install

npm install vue-infinite-scroll --save

CommonJS

You can use any build tool which supports commonjs:

// register globally
var infiniteScroll =  require('vue-infinite-scroll');
Vue.use(infiniteScroll)

// or for a single instance
var infiniteScroll = require('vue-infinite-scroll');
new Vue({
  directives: {infiniteScroll}
})

Or in ES2015:

// register globally
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

// or for a single instance
import infiniteScroll from 'vue-infinite-scroll'
new Vue({
  directives: {infiniteScroll}
})

Direct include

You can use the CDN: https://unpkg.com/vue-infinite-scroll, infiniteScroll is exposed to window and will automatically install itself. Also you can use your local copy:

<script src="../node_modules/vue-infinite-scroll/vue-infinite-scroll.js"></script>

Usage

Use v-infinite-scroll to enable the infinite scroll, and use infinite-scroll-* attributes to define its options.

The method appointed as the value of v-infinite-scroll will be executed when the bottom of the element reaches the bottom of the viewport.

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  ...
</div>

var count = 0;

new Vue({
  el: '#app',
  data: {
    data: [],
    busy: false
  },
  methods: {
    loadMore: function() {
      this.busy = true;

      setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({ name: count++ });
        }
        this.busy = false;
      }, 1000);
    }
  }
});

Options

Option	Description
infinite-scroll-disabled	infinite scroll will be disabled if the value of this attribute is true.
infinite-scroll-distance	Number(default = 0) - the minimum distance between the bottom of the element and the bottom of the viewport before the v-infinite-scroll method is executed.
infinite-scroll-immediate-check	Boolean(default = true) - indicates that the directive should check immediately after bind. Useful if it's possible that the content is not tall enough to fill up the scrollable container.
infinite-scroll-listen-for-event	infinite scroll will check again when the event is emitted in Vue instance.
infinite-scroll-throttle-delay	Number(default = 200) - interval(ms) between next time checking and this time

Development

Command	Description
npm run build	Build in umd format
npm test	Lint code

License

MIT

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of vue-scroller

Cons of vue-scroller

Code Comparison

Summary

Pros of vue-lazyload

Cons of vue-lazyload

Code Comparison

Pros of vue-awesome-swiper

Cons of vue-awesome-swiper

Code Comparison

Convert designs to code with AI

README

vue-infinite-scroll

Install

CommonJS

Direct include

Usage

Options

Development

License

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days