Press "Enter" to skip to content

A Managed Scroller To Dynamically Load Items | vue-managed-scroller

Manage Scroller is a component of Vue.js to dynamically load objects into the view.

dynamically add form fields vue, vue v for dynamic data, dynamically addremove input fields using vuejs, vue js remove component dynamically, add textbox on button click vuejs

Notes

  • In order to handle scroller resizing, either the ResizeObserver API or the IntersectionObserver API is used. If neither is available, a simple resize event will be attached to the window. If these APIs are not available, consider using a multi-fill IntersectionObserver here. On the other hand, you might consider approaching resizing with your own logic via the resizing method.
  • Scroller is set to a default width of 100% and height of 100%, which means that the element that wraps in the scroller must have a specific width and height, otherwise you can manually adjust the width and height of the scroller via its props.

How to make use of it:

Install & Download:

# Yarn
$ yarn add vue-managed-scroller

# NPM
$ npm install vue-managed-scroller --save

Usage

import Vue from 'vue';
import VueManagedScroller from 'vue-managed-scroller';

Vue.use(VueManagedScroller);
import { ManagedScroller, ManagedScrollerShell } from 'vue-managed-scroller';

export default {
  ...
  components: {
    ManagedScroller,
    ManagedScrollerShell
  }
  ...
};

ManagedScroller

Configuration

PropertyTypeDefaultDescription
itemsArray, Number0The items that will be rendered in the list.
widthString, Number100%The width of the scroller area.
heightString, Number100%The height of the scroller area.
directionStringverticalThe scroll direction of the scroller: vertical or horizontal.
bufferNumber0How much content should be rendered outside the viewing area (in pixels)?
invertMouseWheelBooleanfalseAllow the usage of the mousewheel to scroll when the scroll direction is set to horizontal.

Methods

MethodDescription
resizeTriggers a resize of the scroller.
updateShellSizeUpdates a shell size by an index.

Events

EventDescription
startReachedTriggers when the first item is rendered.
endReachedTriggers when the last item is rendered.
renderTriggers when rendered and provides the index of the top most shell.

Default Slot

PropertyTypeDescription
itemanyA single item within the list.
itemIndexNumberThe item index.
isVisibleBooleanWhether the rendered item is in the viewing area.
updateShellSizeFunctionA method to update the shell size of a particular shell when the shell’s size may have potentially changed.

ManagedScrollerShell

Configuration

PropertyTypeDefaultDescription
staticBooleanfalseWhether the shell is a static shell or not. (Static shells are not wrapped by any divs and do not adjust in size via updateShellSize)
sizeNumber40The size of the shell; either the width or height depending on the scroll direction.

dynamically load items with vue js, vue-managed-scroller Plugin/Github, vue dynamic list, vuejs add item to list, vue dynamic form


See Demo And Download

Official Website(levine404): Click Here

This superior jQuery/javascript plugin is developed by levine404. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.