Vue.js的虚拟滚动网格 - vue-virtual-scroll-grid

Vue.js的虚拟滚动网格 - vue-virtual-scroll-grid
插件名称 vue-virtual-scroll-grid
版本号 v0.8.0
发布时间 2021年4月9日
插件作者 rocwang

Vue 3的可重用虚拟滚动器,支持具有高滚动性能的大量网格项目。

安装和下载:

# NPM
$ npm i vue-virtual-scroll-grid

使用

1.导入组件。

import Grid from “../Grid.vue”;

2.创建一个基本的虚拟滚动网格。

<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.所有默认道具。

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;
}

变更日志:

v0.8.0(04/07/2021)

  • 更新