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
newest demo checked by git clone and yarn && yarn dev
npm install vue-virtual-list-observer
or
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 resArr[index] |
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
async why can't use emit
$emit() just triggers the event, after the event is triggered, the logic task of the (child) component ends
So async need to use provide && return promise instance
not async
In the request function you usually request the backend's interface and display it on the screen
If not as mentioned above, no limit