npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-virtual-list-observer

v0.1.2

Published

keyword: **intersectionObserver scroll-list Scroll animation,quick scroll resolved**

Downloads

474

Readme

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 

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

License

MIT License.