virtual-list-vue3 v0.0.2

virtual-list-vue3

虚拟滚动功能, vue3, ts

安装

npm i virtual-list-vue3

示例

使用案例

基础使用

<template>
  <div style="height: 500px">
    <!-- 容器高度，看着给 -->
    <VirtualListVue3 :items="items" data-key="id">
      <template #="{ item }">
        <div
          :style="{
            height: item.height + 'px',
            fontSize: '14px',
            display: 'flex',
            borderBottom: 'solid 1px #ccc',
            alignItems: 'center',
            justifyContent: 'center',
            border: 'solid 1px #f00',
            padding: '3px',
            margin: '5px',
          }"
        >
          {{ item.title }}
        </div>
      </template>
    </VirtualListVue3>
  </div>
</template>
<script lang="ts" setup>
import VirtualListVue3 from 'virtual-list-vue3'
const items = getRows(10000, 1)

// 生成测试数据
function randomNum(min: number, max: number) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}
function getRows(size: number, current: number) {
  const start = (current - 1) * size
  const arr = new Array(size).fill('').map((v, i) => {
    const index = start + i + 1
    return {
      id: index,
      title: index + ' - ' + '随意',
      height: randomNum(50, 100),
    }
  })
  return arr
}
</script>

interface XlVirtualListProps {
  items: XlVirtualListItemOption[]; // 数据集合，可以是响应式，可以写死
  dataKey: string; // 集合中唯一值字段名，比如"id"
  itemAverage?: number; // 平均每个项目的尺寸，比如 60
  minItemsNumber?: number; // 超过这个数才会做虚拟滚动，默认100
  direction?: 'horizontal' | 'vertical'; // 方向，横着还是竖着滚动
}