Description:
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.
interface Props {
// The number of items in the list.
// Required and must be an integer and greater than or equal to 0.
length: number;
// The callback that returns a page of items as a promise.
// Required.
pageProvider: (pageNumber: number, pageSize: number) => Promise<unknown[]>;
// The number of items in a page from the item provider (e.g. a backend API).
// Required and must be an integer and greater than 1.
pageSize: number;
}Preview:
Changelog:
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