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:
v0.8.0 (04/07/2021)
- Update
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