安装使用

• 安装包npm i @yll10243/virtual-list -D
• main.ts|js进行引入然后挂载(如下伪代码)

#引入
import "@yll10243/virtual-list/dist/style.css"
import virtualUI from "@yll10243/virtual-list"
#挂载所有
app.use(virtualUI)

#按需载入
import "@yll10243/virtual-list/dist/style.css"
import {FixedSizeList, DynamicSizeList, FixedSizeGrid, DynamicSizeGrid} from "@yll10243/virtual-list"
#按需使用
app.use(FixedSizeList)

使用举例

dynamicSizeGrid

<template>
  <AyiDynamicSizeGrid v-bind="attrs" ref="gridRef">
    <template #default="{ columnIndex, style, rowIndex }">
      <div class="item" :style="style">item {{ rowIndex }} {{ columnIndex }}</div>
    </template>
  </AyiDynamicSizeGrid>
</template>
<script setup lang="ts">
import { reactive } from "vue"
const columnWidths = Array.from({ length: 100 }).map((_, i) => 25 + i)

const rowHeights = Array.from({ length: 100 }).map((_, i) => 25 + i)
const attrs = reactive({
  className: "window",
  columnWidth: (idx: number) => columnWidths[idx],
  height: 100,
  rowHeight: (idx: number) => rowHeights[idx],
  totalColumn: 100,
  totalRow: 100,
  width: 100
})
</script>

dynamicSizeList

<template>
  <AyiDynamicSizeList v-bind="attrs" ref="listRef">
    <template #default="{ index, style }">
      <div class="item" :style="style">{{ index }}</div>
    </template>
  </AyiDynamicSizeList>
</template>
<script setup lang="ts">
import { reactive } from "vue"
const widths = Array.from({ length: 100 }).map(() => 25 + Math.floor(Math.random() * 5) + 1) // greater than 26 less or equal to 30
const attrs = reactive({
  cache: 3,
  className: "window",
  estimatedItemSize: 25,
  height: 100,
  total: 100,
  itemSize: (idx: number) => widths[idx],
  width: 50
})
</script>
<style lang="scss" scoped></style>

fixedSizeGrid

<template>
  <AyiFixedSizeGrid v-bind="attrs" ref="gridRef">
    <template #default="{ columnIndex, style, rowIndex }">
      <div class="item" :style="style">item {{ rowIndex }} {{ columnIndex }}</div>
    </template>
  </AyiFixedSizeGrid>
</template>
<script setup lang="ts">
import { reactive } from "vue"

const attrs = reactive({
  className: "window",
  columnWidth: 50,
  height: 100,
  rowHeight: 25,
  totalColumn: 100,
  totalRow: 100,
  width: 100
})
</script>
<style lang="scss" scoped></style>

fixedSizeList

<template>
  <AyiFixedSizeList v-bind="attrs" ref="listRef">
    <template #default="{ index, style }">
      <div class="item" :style="style">item {{ index }}</div>
    </template>
  </AyiFixedSizeList>
</template>
<script setup lang="ts">
import { reactive } from "vue"
const attrs = reactive({
  cache: 3,
  className: "window",
  height: 100,
  total: 100,
  itemSize: 25,
  width: 200
})
</script>
<style lang="scss" scoped>
// :deep(.window) {
//   width: 200px !important;
// }
</style>