# vue-virtual-scroll

**Repository Path**: hao-kuai/vue-virtual-scroll

## Basic Information

- **Project Name**: vue-virtual-scroll
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-08
- **Last Updated**: 2025-09-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue Virtual Scroll

一个基于 Vue3 + TypeScript 的高性能虚拟滚动组件。

## 特性

- 🚀 高性能虚拟滚动，支持大量数据渲染
- 📱 响应式设计，支持移动端
- 🎨 现代化 UI 设计
- 🔧 完全使用 TypeScript 编写，提供完整的类型支持
- ⚡ 基于 Vite 构建，开发体验优秀

## 技术栈

- Vue 3.4+
- TypeScript 5.3+
- Vite 5.0+
- CSS3

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 类型检查

```bash
npm run type-check
```

## 项目结构

```
src/
├── components/          # 组件目录
│   └── VirtualScrollList.vue  # 虚拟滚动组件
├── types/              # 类型定义
│   └── index.ts
├── assets/             # 静态资源
├── App.vue            # 根组件
├── main.ts            # 入口文件
└── style.css          # 全局样式
```

## 组件使用

```vue
<template>
  <VirtualScrollList :items="items" :item-height="50" :container-height="400" />
</template>

<script setup lang="ts">
import VirtualScrollList from "./components/VirtualScrollList.vue";

const items = ref([
  { id: 1, text: "列表项 1" },
  { id: 2, text: "列表项 2" },
  // ... 更多数据
]);
</script>
```

## Props

| 参数            | 类型   | 默认值 | 说明     |
| --------------- | ------ | ------ | -------- |
| items           | Array  | []     | 数据列表 |
| itemHeight      | Number | 50     | 每项高度 |
| containerHeight | Number | 400    | 容器高度 |

## 方法

| 方法名   | 参数          | 说明               |
| -------- | ------------- | ------------------ |
| scrollTo | index: number | 滚动到指定索引位置 |

## 开发说明

这是一个演示项目，展示了如何使用 Vue3 + TypeScript 构建一个虚拟滚动组件。组件采用了虚拟化技术，只渲染可见区域的项目，从而实现了高性能的大数据列表渲染。