Vue.js的虚拟滚动网格

Vue 3的一个可重复使用的虚拟滚动器，支持大量的网格项目，具有很高的滚动性能。

如何使用它。

1.导入该组件。

import Grid from "../Grid.vue";

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

// 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",
},

预览。

更改日志。

v1.8.0 (09/27/2022)

• 添加道具 respectScrollToOnResize

v1.7.1 (06/23/2022)

• 当pageProvider改变时，正确呈现多个可见页面

v1.7.0 (06/05/2022)

• 使用动态组件来定义容器元素

v1.6.1 (06/04/2022)

• 错误修复

v1.6.0 (06/01/2022)

• 支持水平滚动

v1.5.0 (06/01/2022)

• 支持平滑和自动滚动行为道具

v1.4.2 (04/01/2022)

• 错误修正

v1.4.1 (03/19/2022)

• 错误修正

v1.4.0 (02/12/2022)

• 关于scrollTo道具，支持非窗口滚动的父节点

v1.3.0 (01/21/2022)

• 支持去掉对页面提供者的调用

v1.2.4 (12/22/2021)

• 修复：没有Vite-dts的类型生成

v1.2.3 (11/20/2021)

• 错误修复

v1.2.2 (11/18/2021)

• 避免过度渲染

v1.2.1 (09/19/2021)

• 错误修复

The postVirtual Scroll Grid For Vue.jsappeared first onVue Script.