Vue-virtual-list-observer NPM

vue-virtual-list-observer

keyword: intersectionObserver scroll-list Scroll animation，quick scroll resolved

yarn add vue-virtual-list-observer

Advantages

Only 3 required props, simple and very easy to use.
intersectionObserver efficient and resolve Fast scrolling in a white screen.
Highly customizable and has a live demo to get started quickly
Callback function, which allows the dynamic addition of list items according to the scrolling situation

import { ListDOM } from 'vue-virtual-list-observer'

live demo1

stackblitz

newest demo checked by git clone and yarn && yarn dev

npm install vue-virtual-list-observer

yarn add vue-virtual-list-observer

Props type

Required props

Prop	Type	Description
visualDomCount	Number	Number of elements visible in the list.It is worth noting that the number of render Doms is usually greater than the number of visualDoms
resArr	Array[]	The source array built for list, The effect and logic are the same as the real list
scrollInstance	function(){return HTMLDivElement }	Need to transfer the nearest scrollable ancestor of the ListDOM component (for custom scroll bar and else)

Option props

Prop	Type	Description
domHeight	Number	Approximate height of list item, usually used to handle edge cases
scrollAnima	Boolean	scrollToTop has a scrolling effect,not directly

Public methods (provide,emit)

Method	Description
request	Event triggered when the scroll bar scrolls to the bottom and the number of elements in resArr is not enough for the next loading, this event will be triggered. (Typically, that function need you to request api and pushes new data into resarr)

public methods(ref)

Method	Description
getScroll	Get the scrollTop distance of the list
scrollToTop	set scroll position to ListTop.
scrollToIndex	set scroll position to resArrindex

slot

Method	Description
list	Set the style of the list item element
footer	Set the style of loading to request

Attention

for the public method(provide,emit) request

if you want to do some async things, in the provide function you need return promise instance,because of async func is uncontrollable for the ListDOM Childcomponent. And you need to use provide api to provide request function to ListDOM component