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
ResizeObserverAPI or theIntersectionObserverAPI 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
| Property | Type | Default | Description |
|---|---|---|---|
items | Array, Number | 0 | The items that will be rendered in the list. |
width | String, Number | 100% | The width of the scroller area. |
height | String, Number | 100% | The height of the scroller area. |
direction | String | vertical | The scroll direction of the scroller: vertical or horizontal. |
buffer | Number | 0 | How much content should be rendered outside the viewing area (in pixels)? |
invertMouseWheel | Boolean | false | Allow the usage of the mousewheel to scroll when the scroll direction is set to horizontal. |
Methods
| Method | Description |
|---|---|
resize | Triggers a resize of the scroller. |
updateShellSize | Updates a shell size by an index. |
Events
| Event | Description |
|---|---|
startReached | Triggers when the first item is rendered. |
endReached | Triggers when the last item is rendered. |
render | Triggers when rendered and provides the index of the top most shell. |
Default Slot
| Property | Type | Description |
|---|---|---|
item | any | A single item within the list. |
itemIndex | Number | The item index. |
isVisible | Boolean | Whether the rendered item is in the viewing area. |
updateShellSize | Function | A method to update the shell size of a particular shell when the shell’s size may have potentially changed. |
ManagedScrollerShell
Configuration
| Property | Type | Default | Description |
|---|---|---|---|
static | Boolean | false | Whether the shell is a static shell or not. (Static shells are not wrapped by any divs and do not adjust in size via updateShellSize) |
size | Number | 40 | The 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.
