A simple web component (Vue.js >= 3.2) that provides infinite scrolling to display a large array of data one element at a time

Overview

infinite-scroller-comp

infinite-scroller-comp is a Vue.js (>=3.2) web component that provides a content area and an associated vertical scroll bar. The developer can specify an array of content and receive an event notice when the vertical scroll moves to the bottom of the array content. Responding to the event by pushing an additional item to the array causes reactivity on the display and a repetitive cycle of scrolling, pushing, and display update.

infinite-scroller-comp can be installed via with the included package.json file for a local installation via the npm install command. infinite-scroller-comp depends on the vue.js framework. A demo folder is provided that used Parcel together with its associated package.json file to bundle together infinite-scroller-comp along with its vue.js dependency for a simple application. Further details are provided below for running the demo.

Props

A prop in Vue.js is a custom attribute for passing information from a parent component hosting infinite-scroller-comp instance(s) to an infinite-scroller-comp as a child component. infinite-scroller-comp has the following prop for a parent to bind and send information to:

cssVariables -- defines the css variables for infinite-scroller-comp (object, default: null)

Styling

The cssVariables prop is a javascript object that contains a css variable name as keys and associated values. The following is the css variable name along with its default value for a quick styling of infinite-scroller-comp:

{
    scroller_height: '30rem'
}

Events

infinite-scroller-comp has one event that notifies the parent component bottom of the vertical scroll is reached.

infinite-scroller-comp emits the following single named event:

'reachedBottom' -- returns a boolean of true if scroller is at the bottom, otherwise returns false

The parent component can listen to the above event and provide a callback for further processing. Events emitted from a child component back to the parent is explained at Vue Custom Events.

The demonstration shows how the event can be incorporated.

Demonstration

One demonstration of infinite-scroller-comp is provided in the folder named dist-prod. The demo (templated in the App.vue file) can viewed by hosting the index.html file.

As a suggestion, install http-server locally/globally via npm then enter the command http-serverin the infinite-scroller-comp dist-prod directory. From a browser enter the url: localhost:8080/ to view the demo.

Here is some example code for using infinite-scroller-comp taken from theApp.vue file:

	<infinite-scroller-comp
      :css-variables="cssVariables"
      @reached_bottom="add_person"
    >
      <div>
        <person-comp
          v-for="(person,index) in persons"
          :key="index"
          :img-source-url="person.picture.large"
          :first-name="person.name.first"
          :last-name="person.name.last"
          :birth-date="person.dob.date"
          :age="person.dob.age"
          :location-city="person.location.city"
          :location-state="person.location.state"
        >
        </person-comp>
      </div>
    </infinite-scroller-comp>

Note that the method add_person will respond to infinite-scroller-comp's event 'reachedBottom' . If the event returns true then we will add another person to the persons array. By pushing another person the display will be reactivity updated and the vertical scroll bar will move up a notch.

The supporting data references:

data: function() {
    return {
      url: 'https://randomuser.me/api/',
      persons: null,
      css_variables: {
        scroller_height: '35rem'
      }
    }
  },

The supporting methods:

methods: {
    add_person(at_bottom){
      if(at_bottom){
        const config = {
          method: 'GET',
          mode: 'cors'
        };
        fetch(this.url,config).then((response) =>{
          if(response.ok){
            return response.text();
          }
          throw new Error(response.statusText);
        }).then((resp_str) => {
          const person_obj = JSON.parse(resp_str);
          this.persons.push(person_obj.results[0]);
        }).catch((error) => {
          console.log(error.message);
        })
      }
    }
  },
  mounted() {
    this.persons = [];
      try {
        const config = {
          method: 'GET',
          mode: 'cors'
        };
        for(let i = 0; i < 5; i++){
          fetch(this.url,config).then(response => {
            if(response.ok){
              return response.text();
            }
            throw new Error(response.statusText);
          }).then(resp_str => {
            const person_obj = JSON.parse(resp_str);
            this.persons.push(person_obj.results[0]);
          });
        }
      }catch(error){
        console.log(error.message);
      }
    }
    initialize_data();
  }

Note the we initialize the persons array with 5 person objects at the mounted stage of Vue.

Also Note the event responder add_person where if the event value of at_bottom is true then fetch another person and push it onto the persons array to start reactivity of the display.

You might also like...
Infinite scroll component compatible with vuejs-3 and vitejs

Intro An infinite scroll component compatible with vue.js 3 and vite, to help you implement an infinite scroll list more easily. Features Lightweight

Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Infinite scroll list for Vue.js with DOM recycling.

vue-recyclist (not maintained) Infinite scroll list for Vue.js (v2.1+) with DOM recycling. Demo Installation npm install -D vue-recyclist Import impor

infinite list based on vue2

vue-infinite-list infinite list based on vue2. Installation npm i vue-infinite-list demo npm run start Basic Use import and register the infinite li

:beginner:A simple, seamless scrolling for Vue.js vue无缝滚动component

vue-seamless-scroll A simple, Seamless scrolling for Vue.js Features Initial configuration support Compatible with multiple platforms Multi-technology

A simple, Seamless scrolling for Vue.js

A simple, Seamless scrolling for Vue.js

↕ A simple but fast & powerful library to animate HTML elements while scrolling pages.

Vue Scroll Animator ↕ A simple but fast & powerful library to animate HTML elements while scrolling pages. Installation npm install @byloth/vue-scroll

Vue-slidePage is a fullscreen scrolling component of Vue.js, Based on slidePage

vue-slidePage Introduction vue-slidePage is a fullscreen scrolling component of Vue.js, Based on slidePage Demo simple custom Usage Install $ npm i -S

Owner
null
⚡️ Blazing fast scrolling for any amount of data

vue-virtual-scroller Blazing fast scrolling of any amount of data | Live demo | Video demo For Vue 3 support, see here ??️ Become a Sponsor Sponsors T

Guillaume Chau 7.2k Oct 1, 2022
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 182 Oct 1, 2022
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 181 Aug 30, 2022
A Vue directive to lock the body scroll without stopping the target element from scrolling

A Vue directive to lock the body from scrolling without stopping the target element from scrolling

Bram Honingh 30 Jul 10, 2022
A Vue plugin which supervises binding element's scrolling and trigger target elements class

A Vue plugin which supervises binding element's scrolling and trigger target elements class

null 0 Nov 27, 2020
A Vue plugin which supervises binding element's scrolling and trigger target elements class

vue-scroll-trigger A Vue plugin which supervises binding element's scrolling and trigger target elements class Sample BEHIVE-DESIGN Install with yarn

Ranlizzz 2 Nov 5, 2020
A Vue directive that prevents vertical scrolling outside the current element when top or bottom are reached.

A Vue directive that prevents vertical scrolling outside the current element when top or bottom are reached.

Carlos González 20 Sep 27, 2021
Infinite scroll component created with Vue & sass

Vue Infinite-Scroll component With Futurama Characters <3 Demo Link Also works for mobile devices Project setup npm install Compiles and hot-reloads

Larissa Avila 0 Jan 12, 2021
An infinite and pull scroller component for Vue.js

vue-pull-infinite-scroller vue-pull-infinite-scroller is a native scrolling component that performs well in a webview, pull to refresh & infinite load

joubn 7 Sep 2, 2022
⚡️A pull-down refresh and pull-up load more and infinite scroll component for Vue.js.

Vue-Pull-To A pull-down refresh and pull-up load more and infinite scroll component for Vue.js.

stackjie 739 Sep 18, 2022