A reusable virtual scroller for Vue 3 that supports big amount grid items with high scroll performance.
How to use it:
1. Import the component.
import Grid from "../Grid.vue";
2. Create a basic virtual scroll grid.
<Grid :length="length" :pageSize="pageSize" :pageProvider="pageProvider" :class="$style.grid" > <template v-slot:probe> <ProductItem sizes="(min-width: 768px) 360px, 290px" /> </template> <template v-slot:placeholder="{ style }"> <ProductItem :style="style" sizes="(min-width: 768px) 360px, 290px" /> </template> <template v-slot:default="{ item, style }"> <ProductItem :handle="item.handle" :price="item.price * 100" :compare-at-price="item.compare_at_price * 100" :published-at="new Date(item.published_at)" :style="style" :master-src="item.product_image" :initial-alt-master-src="true" :alt="item.title" sizes="(min-width: 768px) 360px, 290px" :tags="item.tags" :vendor="item.vendor" :title="item.title" /> </template> </Grid>
3. All default props.
// The number of items in the list. length: { type: Number as PropType<number>, required: true, validator: (value: number) => Number.isInteger(value) && value >= 0, }, // The callback that returns a page of items as a promise. pageProvider: { type: Function as PropType<PageProvider>, required: true, }, // Debounce window in milliseconds on the calls to `pageProvider`, // which is useful for avoiding network requests of skimmed pages. pageProviderDebounceTime: { type: Number as PropType<number>, required: false, default: 0, validator: (value: number) => Number.isInteger(value) && value >= 0, }, // The number of items in a page from the item provider (e.g. a backend API). pageSize: { type: Number as PropType<number>, required: true, validator: (value: number) => Number.isInteger(value) && value >= 1, }, // Scroll to a specific item by index, must be less than the length prop scrollTo: { type: Number as PropType<number>, required: false, validator: (value: number) => Number.isInteger(value) && value >= 0, }, // Snap to `scrollTo` when the grid container is resized respectScrollToOnResize: { type: Boolean as PropType<boolean>, required: false, default: true, }, scrollBehavior: { type: String as PropType<"smooth" | "auto">, required: false, default: "smooth", validator: (value: string) => ["smooth", "auto"].includes(value), }, tag: { type: String as PropType<string>, required: false, default: "div", }, probeTag: { type: String as PropType<string>, required: false, default: "div", }, getKey: { type: Function as PropType<(internalItem: InternalItem) => number | string>, required: false, default: undefined, },
Preview:
Changelog:
v1.10.2 (04/02/2023)
- Bug Fixes
v1.10.1 (12/19/2022)
- listen for scroll events on windows when the scroll parent is the document
v1.10.0 (10/14/2022)
- support running inside a native web component
v1.9.0 (09/27/2022)
- new getKey prop
v1.8.0 (09/27/2022)
- add prop respectScrollToOnResize
v1.7.1 (06/23/2022)
- correctly render multiple visible pages when pageProvider changes
v1.7.0 (06/05/2022)
- use dynamic component to define container element
v1.6.1 (06/04/2022)
- Bug Fixes
v1.6.0 (06/01/2022)
- support horizontal scrolling
v1.5.0 (06/01/2022)
- support smooth and auto scrollBehavior prop
v1.4.2 (04/01/2022)
- bugfixes
v1.4.1 (03/19/2022)
- bugfixes
v1.4.0 (02/12/2022)
- support non-window scroll parent regarding the scrollTo prop
v1.3.0 (01/21/2022)
- support debouncing calls to page provider
v1.2.4 (12/22/2021)
- fix: type generation without vite-dts
v1.2.3 (11/20/2021)
- Bug Fixes
v1.2.2 (11/18/2021)
- avoid over rendering
v1.2.1 (09/19/2021)
- Bug Fixes
Download Details:
Author: rocwang
Live Demo: https://vue-virtual-scroll-grid.netlify.app/
Download Link: https://github.com/rocwang/vue-virtual-scroll-grid/archive/main.zip
Official Website: https://github.com/rocwang/vue-virtual-scroll-grid
Install & Download:
# NPM
$ npm i vue-virtual-scroll-grid