diff --git a/packages/varlet-ui/src/virtual-list/VirtualList.vue b/packages/varlet-ui/src/virtual-list/VirtualList.vue
new file mode 100644
index 00000000000..4fa84e1f5ba
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/VirtualList.vue
@@ -0,0 +1,263 @@
+<template>
+  <div ref="containerRef" :class="n()" :style="containerStyle" @scroll.passive="handleScroll">
+    <!-- Phantom layer for scroll area -->
+    <div :class="n('phantom')" :style="{ height: `${phantomHeight}px` }" />
+    <!-- Content layer for actual rendering -->
+    <div ref="contentRef" :class="n('content')" :style="{ transform: getTransform() }">
+      <div v-for="(item, index) in visibleData" :key="index" :class="n('item')">
+        <slot :item="item" :index="start + index" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, reactive, ref, toRefs, watch } from 'vue'
+import { call, toNumber } from '@varlet/shared'
+import { createNamespace } from '../utils/components'
+import { props } from './props'
+
+const { name, n, classes } = createNamespace('virtual-list')
+
+interface CachedPosition {
+  index: number
+  top: number
+  bottom: number
+  height: number
+  dValue: number
+}
+
+enum CompareResult {
+  eq = 1,
+  lt,
+  gt,
+}
+
+// Binary search for fast index lookup
+function binarySearch<T, VT>(list: T[], value: VT, compareFunc: (current: T, value: VT) => CompareResult): number {
+  let start = 0
+  let end = list.length - 1
+  let tempIndex = 0
+
+  while (start <= end) {
+    tempIndex = Math.floor((start + end) / 2)
+    const midValue = list[tempIndex]
+    const compareRes = compareFunc(midValue, value)
+    if (compareRes === CompareResult.eq) {
+      return tempIndex
+    }
+    if (compareRes === CompareResult.lt) {
+      start = tempIndex + 1
+    } else {
+      end = tempIndex - 1
+    }
+  }
+
+  return tempIndex
+}
+
+export default defineComponent({
+  name,
+  props,
+  setup(props) {
+    // DOM refs
+    const containerRef = ref<HTMLElement | null>(null)
+    const contentRef = ref<HTMLElement | null>(null)
+
+    // Virtual scroll state
+    const state = reactive({
+      start: 0,
+      originStartIndex: 0,
+      scrollTop: 0,
+      cachePositions: [] as CachedPosition[],
+      phantomHeight: 0,
+    })
+
+    // Computed container style
+    const containerStyle = computed(() => {
+      if (props.containerHeight) {
+        return {
+          height: typeof props.containerHeight === 'number' ? `${props.containerHeight}px` : props.containerHeight,
+        }
+      }
+      return {}
+    })
+
+    // Number of visible items
+    const visibleCount = computed(() => {
+      if (!containerRef.value) {
+        return 0
+      }
+      return Math.ceil(containerRef.value.clientHeight / toNumber(props.itemHeight))
+    })
+
+    // End index (start + visible + buffer)
+    const end = computed(() => {
+      return Math.min(state.originStartIndex + visibleCount.value + props.bufferSize, props.data.length)
+    })
+
+    // Visible data
+    const visibleData = computed(() => {
+      return props.data.slice(state.start, end.value)
+    })
+
+    // Get transform style for content layer
+    const getTransform = () => {
+      return `translate3d(0, ${state.start >= 1 ? state.cachePositions[state.start - 1].bottom : 0}px, 0)`
+    }
+
+    // Initialize cached positions
+    function initCachedPosition() {
+      state.cachePositions = []
+      const itemHeight = toNumber(props.itemHeight)
+      for (let i = 0; i < props.data.length; ++i) {
+        state.cachePositions[i] = {
+          index: i,
+          height: itemHeight,
+          top: i * itemHeight,
+          bottom: (i + 1) * itemHeight,
+          dValue: 0,
+        }
+      }
+      state.phantomHeight = props.data.length * itemHeight
+    }
+
+    // Update cached positions based on actual DOM height
+    function updateCachedPosition() {
+      if (!contentRef.value) {
+        return
+      }
+      const nodes = Array.from(contentRef.value.childNodes).filter((node: Node) => node.nodeType === 1) as HTMLElement[]
+      nodes.forEach((node, index) => {
+        const height = node.offsetHeight
+        const pos = state.cachePositions[index + state.start]
+        const dValue = pos.height - height
+        if (dValue) {
+          pos.bottom -= dValue
+          pos.height = height
+          pos.dValue = dValue
+        }
+      })
+      // Update following positions
+      const startIndex = state.start
+      const len = state.cachePositions.length
+      let cumulativeDiffHeight = state.cachePositions[startIndex].dValue
+      state.cachePositions[startIndex].dValue = 0
+      for (let i = startIndex + 1; i < len; ++i) {
+        const prev = state.cachePositions[i - 1]
+        const curr = state.cachePositions[i]
+        curr.top = prev.bottom
+        curr.bottom = curr.bottom - cumulativeDiffHeight
+        if (curr.dValue !== 0) {
+          cumulativeDiffHeight += curr.dValue
+          curr.dValue = 0
+        }
+      }
+      // Update phantom height
+      state.phantomHeight = state.cachePositions[len - 1]?.bottom || 0
+    }
+
+    // Get start index for given scrollTop
+    function getStartIndex(scrollTop = 0) {
+      let idx = binarySearch<CachedPosition, number>(state.cachePositions, scrollTop, (current, target) => {
+        const val = current.bottom
+        if (val === target) {
+          return CompareResult.eq
+        }
+        if (val < target) {
+          return CompareResult.lt
+        }
+        return CompareResult.gt
+      })
+      const targetItem = state.cachePositions[idx]
+      if (targetItem && targetItem.bottom < scrollTop) {
+        idx += 1
+      }
+      return idx
+    }
+
+    // Reset all virtual scroll params
+    function resetAllVirtualParam() {
+      state.originStartIndex = 0
+      state.start = 0
+      state.scrollTop = 0
+      if (containerRef.value) {
+        containerRef.value.scrollTop = 0
+      }
+      initCachedPosition()
+    }
+
+    // Handle scroll event
+    function handleScroll(e: Event) {
+      if (!containerRef.value) {
+        return
+      }
+      const scrollTop = containerRef.value.scrollTop
+      const { originStartIndex } = state
+      const currentIndex = getStartIndex(scrollTop)
+      if (currentIndex !== originStartIndex) {
+        state.originStartIndex = currentIndex
+        state.start = Math.max(state.originStartIndex - props.bufferSize, 0)
+      }
+      state.scrollTop = scrollTop
+      call(props.onScroll, e)
+    }
+
+    // Scroll to specified index
+    function scrollTo(index: number) {
+      if (!containerRef.value || index < 0 || index >= props.data.length) {
+        return
+      }
+      if (state.cachePositions[index]) {
+        containerRef.value.scrollTop = state.cachePositions[index].top
+      } else {
+        const itemHeight = toNumber(props.itemHeight)
+        containerRef.value.scrollTop = index * itemHeight
+      }
+    }
+
+    // Watch data changes, reset virtual params
+    watch(
+      () => props.data,
+      (newVal, oldVal) => {
+        if (newVal.length !== oldVal.length) {
+          resetAllVirtualParam()
+        }
+      },
+      { deep: true },
+    )
+
+    // Watch start index, update cached positions
+    watch(
+      () => state.start,
+      () => {
+        if (contentRef.value && props.data.length > 0) {
+          updateCachedPosition()
+        }
+      },
+    )
+
+    // Init cached positions on mount
+    onMounted(() => {
+      initCachedPosition()
+    })
+
+    return {
+      n,
+      classes,
+      containerRef,
+      contentRef,
+      containerStyle,
+      scrollTo,
+      handleScroll,
+      visibleData,
+      getTransform,
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import './virtualList';
+</style>
diff --git a/packages/varlet-ui/src/virtual-list/__tests__/index.spec.js b/packages/varlet-ui/src/virtual-list/__tests__/index.spec.js
new file mode 100644
index 00000000000..23ed45508e2
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/__tests__/index.spec.js
@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import { expect, test } from 'vitest'
+import VirtualList from '..'
+
+test('virtual-list plugin', () => {
+  const app = createApp({}).use(VirtualList)
+  expect(app.component(VirtualList.name)).toBeTruthy()
+})
diff --git a/packages/varlet-ui/src/virtual-list/docs/en-US.md b/packages/varlet-ui/src/virtual-list/docs/en-US.md
new file mode 100644
index 00000000000..4328281d9f4
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/docs/en-US.md
@@ -0,0 +1,192 @@
+# VirtualList
+
+### Intro
+
+A high-performance scrolling list for displaying large amounts of data, using virtual scrolling technology to render only elements in the visible area, greatly improving the performance of long lists.
+
+Virtual lists should only be used when dealing with large amounts of data (typically hundreds to thousands of items) to improve rendering performance. For most common scenarios, regular list rendering is sufficient.
+
+This component supports automatic handling of variable height list items. It measures and updates the actual height of each list item after rendering, ensuring accurate scroll positioning.
+
+### Basic Usage
+
+Set list data with the `data` property, set the list item height with `item-height`, and customize the list item content with the default slot.
+
+```html
+<template>
+  <var-virtual-list :data="list" :item-height="56">
+    <template #default="{ item, index }">
+      <div class="list-item">
+        List Item {{ item }}
+      </div>
+    </template>
+  </var-virtual-list>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const list = ref(
+      Array.from({ length: 1000 }, (_, i) => i + 1)
+    )
+    
+    return { list }
+  }
+}
+</script>
+
+<style>
+.list-item {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  width: 100%;
+  height: 56px;
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  color: #333;
+  font-size: 16px;
+}
+</style>
+```
+
+### Variable Height Items
+
+The component automatically measures and adapts to list items with different heights. In this case, `item-height` is used as an estimated height.
+
+```html
+<template>
+  <var-virtual-list :data="list" :item-height="80">
+    <template #default="{ item, index }">
+      <div class="variable-height-item" :style="{ height: item.height + 'px' }">
+        <div class="item-content">List Item {{ item.id }}</div>
+        <div class="item-desc">{{ item.desc }}</div>
+      </div>
+    </template>
+  </var-virtual-list>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    // Create list items with variable heights
+    const list = ref(
+      Array.from({ length: 1000 }, (_, i) => ({
+        id: i + 1,
+        height: Math.floor(Math.random() * 50) + 50, // Random height between 50-100px
+        desc: 'This is a variable height list item. The component handles scroll position automatically.'
+      }))
+    )
+    
+    return { list }
+  }
+}
+</script>
+
+<style>
+.variable-height-item {
+  padding: 12px 16px;
+  width: 100%;
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.item-content {
+  font-size: 16px;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.item-desc {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.4;
+}
+</style>
+```
+
+### Set Container Height
+
+Set the container height with the `container-height` property or CSS styles.
+
+```html
+<var-virtual-list
+  :data="list"
+  :item-height="56"
+  :container-height="336"
+>
+  <!-- List item content -->
+</var-virtual-list>
+```
+
+### Scroll to Specified Position
+
+Scroll to a specified position using the `scrollTo` method.
+
+```html
+<var-button @click="scrollToPosition">Scroll to Item 50</var-button>
+<var-virtual-list ref="virtualList" :data="list" :item-height="56">
+  <!-- List item content -->
+</var-virtual-list>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const virtualList = ref(null)
+    
+    const scrollToPosition = () => {
+      virtualList.value.scrollTo(50)
+    }
+    
+    return {
+      virtualList,
+      scrollToPosition
+    }
+  }
+}
+</script>
+```
+
+## API
+
+### Props
+
+| Prop | Description | Type | Default |
+| --- | --- | --- | --- |
+| `data` | List data | _any[]_ | `[]` |
+| `item-height` | List item height (unit: pixel), used as estimated height for variable height lists | _number \| string_ | `50` |
+| `buffer-size` | Buffer size (number of pre-rendered list items above and below) | _number_ | `5` |
+| `container-height` | Container height (unit: pixel) | _number \| string_ | `-` |
+
+### Methods
+
+| Method | Description | Parameters | Return |
+| --- | --- | --- | --- |
+| `scrollTo` | Scroll to the specified index position | `index: number` | `-` |
+
+### Events
+
+| Event | Description | Arguments |
+| --- | --- | --- |
+| `scroll` | Triggered when the list scrolls | `event: Event` |
+
+### Slots
+
+| Name | Description | SlotProps |
+| --- | --- | --- |
+| `default` | List item content | `{ item: any, index: number }` |
+
+### Style Variables
+
+Here are the CSS variables used by the component, which can be customized using [StyleProvider](#/en-US/style-provider).
+
+| Variable | Default |
+| --- | --- |
+| `--virtual-list-height` | `100%` |
+
diff --git a/packages/varlet-ui/src/virtual-list/docs/zh-CN.md b/packages/varlet-ui/src/virtual-list/docs/zh-CN.md
new file mode 100644
index 00000000000..3f8ec5873b6
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/docs/zh-CN.md
@@ -0,0 +1,192 @@
+# 虚拟滚动列表
+
+### 介绍
+
+用于展示大量数据的高性能滚动列表，通过虚拟滚动技术只渲染可视区域内的元素，极大提高了长列表的性能。
+
+只有在处理大量数据（通常是几百到几千条）需要提高渲染性能时，才需要使用虚拟列表。对于大多数常见场景，普通的列表渲染就足够了。
+
+本组件支持自动处理不定高列表项，会在渲染后自动测量并更新每个列表项的实际高度，确保滚动位置的准确性。
+
+### 基本使用
+
+通过 `data` 属性设置列表数据，通过 `item-height` 设置列表项高度，通过默认插槽自定义列表项内容。
+
+```html
+<template>
+  <var-virtual-list :data="list" :item-height="56">
+    <template #default="{ item, index }">
+      <div class="list-item">
+        列表项 {{ item }}
+      </div>
+    </template>
+  </var-virtual-list>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const list = ref(
+      Array.from({ length: 1000 }, (_, i) => i + 1)
+    )
+    
+    return { list }
+  }
+}
+</script>
+
+<style>
+.list-item {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  width: 100%;
+  height: 56px;
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  color: #333;
+  font-size: 16px;
+}
+</style>
+```
+
+### 不定高列表项
+
+组件会自动测量并适应不同高度的列表项，`item-height` 在这种情况下作为预估高度使用。
+
+```html
+<template>
+  <var-virtual-list :data="list" :item-height="80">
+    <template #default="{ item, index }">
+      <div class="variable-height-item" :style="{ height: item.height + 'px' }">
+        <div class="item-content">列表项 {{ item.id }}</div>
+        <div class="item-desc">{{ item.desc }}</div>
+      </div>
+    </template>
+  </var-virtual-list>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    // 创建不同高度的列表项
+    const list = ref(
+      Array.from({ length: 1000 }, (_, i) => ({
+        id: i + 1,
+        height: Math.floor(Math.random() * 50) + 50, // 50-100px随机高度
+        desc: '这是一个高度不固定的列表项，组件会自动处理滚动位置'
+      }))
+    )
+    
+    return { list }
+  }
+}
+</script>
+
+<style>
+.variable-height-item {
+  padding: 12px 16px;
+  width: 100%;
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.item-content {
+  font-size: 16px;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.item-desc {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.4;
+}
+</style>
+```
+
+### 设置容器高度
+
+通过 `container-height` 属性或 CSS 样式设置容器高度。
+
+```html
+<var-virtual-list
+  :data="list"
+  :item-height="56"
+  :container-height="336"
+>
+  <!-- 列表项内容 -->
+</var-virtual-list>
+```
+
+### 滚动到指定位置
+
+通过 `scrollTo` 方法滚动到指定位置。
+
+```html
+<var-button @click="scrollToPosition">滚动到第50项</var-button>
+<var-virtual-list ref="virtualList" :data="list" :item-height="56">
+  <!-- 列表项内容 -->
+</var-virtual-list>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const virtualList = ref(null)
+    
+    const scrollToPosition = () => {
+      virtualList.value.scrollTo(50)
+    }
+    
+    return {
+      virtualList,
+      scrollToPosition
+    }
+  }
+}
+</script>
+```
+
+## API
+
+### 属性
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| `data` | 列表数据 | _any[]_ | `[]` |
+| `item-height` | 列表项高度（单位：像素），对于不定高列表作为预估高度使用 | _number \| string_ | `50` |
+| `buffer-size` | 缓冲区大小（上下预渲染的列表项数量） | _number_ | `5` |
+| `container-height` | 容器高度（单位：像素） | _number \| string_ | `-` |
+
+### 方法
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| `scrollTo` | 滚动到指定索引位置 | `index: number` | `-` |
+
+### 事件
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| `scroll` | 列表滚动时触发 | `event: Event` |
+
+### 插槽
+
+| 插槽名 | 说明 | 参数 |
+| --- | --- | --- |
+| `default` | 列表项内容 | `{ item: any, index: number }` |
+
+### 样式变量
+
+以下为组件使用的 css 变量，可以使用 [StyleProvider 组件](#/zh-CN/style-provider) 进行样式定制。
+
+| 变量名 | 默认值 |
+| --- | --- |
+| `--virtual-list-height` | `100%` |
+
diff --git a/packages/varlet-ui/src/virtual-list/example/index.vue b/packages/varlet-ui/src/virtual-list/example/index.vue
new file mode 100644
index 00000000000..fbf6a870dc9
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/example/index.vue
@@ -0,0 +1,98 @@
+<script setup>
+import { ref } from 'vue'
+import { AppType, onThemeChange, watchLang } from '@varlet/cli/client'
+import VarVirtualList from '..'
+import VarTab from '../../tab'
+import VarTabItem from '../../tab-item'
+import VarTabs from '../../tabs'
+import VarTabsItems from '../../tabs-items'
+import { t, use } from './locale'
+
+// 创建1000个列表项
+const fixedHeightList = ref(Array.from({ length: 1000 }, (_, i) => i + 1))
+
+// 创建不定高列表项
+const variableHeightList = ref(
+  Array.from({ length: 1000 }, (_, i) => ({
+    id: i + 1,
+    height: Math.floor(Math.random() * 50) + 50, // 50-100px随机高度
+    desc: t('variableDesc'),
+  })),
+)
+
+const active = ref(0)
+
+watchLang(use)
+onThemeChange()
+</script>
+
+<template>
+  <var-tabs v-model:active="active" sticky offset-top="14.4vmin" style="margin-bottom: 10px">
+    <var-tab>{{ t('basicUsage') }}</var-tab>
+    <var-tab>{{ t('variableHeight') }}</var-tab>
+  </var-tabs>
+
+  <var-tabs-items v-model:active="active">
+    <var-tab-item>
+      <app-type>{{ t('basicUsage') }}</app-type>
+      <var-virtual-list
+        :data="fixedHeightList"
+        :item-height="56"
+        style="height: 448px; background: var(--color-surface-container-low)"
+      >
+        <template #default="{ item }">
+          <div class="list-item">{{ t('listItem') }} {{ item }}</div>
+        </template>
+      </var-virtual-list>
+    </var-tab-item>
+
+    <var-tab-item>
+      <app-type>{{ t('variableHeight') }}</app-type>
+      <var-virtual-list
+        :data="variableHeightList"
+        :item-height="80"
+        style="height: 448px; background: var(--color-surface-container-low)"
+      >
+        <template #default="{ item }">
+          <div class="variable-height-item" :style="{ height: item.height + 'px' }">
+            <div class="item-content">{{ t('listItem') }} {{ item.id }}</div>
+            <div class="item-desc">{{ item.desc }}</div>
+          </div>
+        </template>
+      </var-virtual-list>
+    </var-tab-item>
+  </var-tabs-items>
+</template>
+
+<style>
+.list-item {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  width: 100%;
+  height: 56px;
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  color: #333;
+  font-size: 16px;
+}
+
+.variable-height-item {
+  padding: 12px 16px;
+  width: 100%;
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.item-content {
+  font-size: 16px;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.item-desc {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.4;
+}
+</style>
diff --git a/packages/varlet-ui/src/virtual-list/example/locale/en-US.ts b/packages/varlet-ui/src/virtual-list/example/locale/en-US.ts
new file mode 100644
index 00000000000..adb3ea5e522
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/example/locale/en-US.ts
@@ -0,0 +1,7 @@
+export default {
+  // Example locale
+  basicUsage: 'Basic Usage',
+  listItem: 'List Item',
+  variableHeight: 'Variable Height Items',
+  variableDesc: 'This is a variable height list item. The component handles scroll position automatically.',
+}
diff --git a/packages/varlet-ui/src/virtual-list/example/locale/index.ts b/packages/varlet-ui/src/virtual-list/example/locale/index.ts
new file mode 100644
index 00000000000..e031be8c1a4
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/example/locale/index.ts
@@ -0,0 +1,17 @@
+import { Locale } from '@varlet/ui'
+import enUS from './en-US'
+import zhCN from './zh-CN'
+
+const { add, use: exampleUse, t, merge } = Locale.useLocale()
+
+const use = (lang: string) => {
+  Locale.use(lang)
+  exampleUse(lang)
+}
+
+Locale.add('zh-CN', Locale.zhCN)
+Locale.add('en-US', Locale.enUS)
+add('zh-CN', zhCN)
+add('en-US', enUS)
+
+export { add, t, merge, use }
diff --git a/packages/varlet-ui/src/virtual-list/example/locale/zh-CN.ts b/packages/varlet-ui/src/virtual-list/example/locale/zh-CN.ts
new file mode 100644
index 00000000000..cbb8d697a1c
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/example/locale/zh-CN.ts
@@ -0,0 +1,6 @@
+export default {
+  basicUsage: '基本使用',
+  listItem: '列表项',
+  variableHeight: '不定高列表项',
+  variableDesc: '这是一个高度不固定的列表项，组件会自动处理滚动位置',
+}
diff --git a/packages/varlet-ui/src/virtual-list/index.ts b/packages/varlet-ui/src/virtual-list/index.ts
new file mode 100644
index 00000000000..f616f554767
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/index.ts
@@ -0,0 +1,12 @@
+import { withInstall, withPropsDefaultsSetter } from '../utils/components'
+import { props as virtualListProps } from './props'
+import VirtualList from './VirtualList.vue'
+
+withInstall(VirtualList)
+withPropsDefaultsSetter(VirtualList, virtualListProps)
+
+export { virtualListProps }
+
+export const _VirtualListComponent = VirtualList
+
+export default VirtualList
diff --git a/packages/varlet-ui/src/virtual-list/props.ts b/packages/varlet-ui/src/virtual-list/props.ts
new file mode 100644
index 00000000000..35f6dbd4c3c
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/props.ts
@@ -0,0 +1,21 @@
+import { defineListenerProp } from '../utils/components'
+
+export const props = {
+  data: {
+    type: Array,
+    default: () => [],
+  },
+  itemHeight: {
+    type: [Number, String],
+    default: 50,
+  },
+  bufferSize: {
+    type: Number,
+    default: 5,
+  },
+  containerHeight: {
+    type: [Number, String],
+    default: null,
+  },
+  onScroll: defineListenerProp<(e: Event) => void>(),
+}
diff --git a/packages/varlet-ui/src/virtual-list/virtualList.d.ts b/packages/varlet-ui/src/virtual-list/virtualList.d.ts
new file mode 100644
index 00000000000..d4a661155ea
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/virtualList.d.ts
@@ -0,0 +1,35 @@
+import { VarComponent } from '../varComponent'
+
+export interface VirtualListProps {
+  /** 列表数据 */
+  data?: any[]
+  /** 列表项高度（单位：像素） */
+  itemHeight?: number | string
+  /** 缓冲区大小（上下预渲染的列表项数量） */
+  bufferSize?: number
+  /** 容器高度（单位：像素） */
+  containerHeight?: number | string
+  /** 滚动事件回调 */
+  onScroll?: (e: Event) => void
+}
+
+export interface VirtualListSlots {
+  /** 默认插槽，用于自定义列表项内容 */
+  default: (item: { item: any; index: number }) => JSX.Element
+}
+
+export interface VirtualListMethods {
+  /** 滚动到指定索引位置 */
+  scrollTo: (index: number) => void
+}
+
+export type VirtualListListeners = {
+  /** 滚动事件监听器 */
+  onScroll?: (e: Event) => void
+}
+
+export type VirtualList = VarComponent<VirtualListProps, VirtualListSlots, VirtualListMethods, VirtualListListeners>
+
+export class _VirtualListComponent extends VarComponent {
+  scrollTo(index: number): void
+}
diff --git a/packages/varlet-ui/src/virtual-list/virtualList.less b/packages/varlet-ui/src/virtual-list/virtualList.less
new file mode 100644
index 00000000000..8024ffaa3d4
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/virtualList.less
@@ -0,0 +1,34 @@
+:root {
+  --virtual-list-height: 100%;
+}
+
+.var-virtual-list {
+  /* 基础样式 */
+  height: var(--virtual-list-height);
+  overflow-y: auto;
+  position: relative;
+
+  /* 幽灵层 - 撑开滚动区域 */
+  &__phantom {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: -1;
+  }
+
+  /* 内容层 - 实际渲染的可视区域 */
+  &__content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+  }
+
+  /* 列表项容器 */
+  &__item {
+    width: 100%;
+    box-sizing: border-box;
+  }
+}
diff --git a/packages/varlet-ui/types/styleVars.d.ts b/packages/varlet-ui/types/styleVars.d.ts
index 4d13dbad5b9..8503050ee4e 100644
--- a/packages/varlet-ui/types/styleVars.d.ts
+++ b/packages/varlet-ui/types/styleVars.d.ts
@@ -900,6 +900,7 @@ interface BaseStyleVars {
   '--uploader-disabled-color'?: string
   '--uploader-disabled-text-color'?: string
   '--uploader-loading-background'?: string
+  '--virtual-list-height'?: string
   '--watermark-content-color'?: string
   [key: PropertyKey]: string
 }
diff --git a/packages/varlet-ui/varlet.config.mjs b/packages/varlet-ui/varlet.config.mjs
index 681e8a61c49..01445230a26 100644
--- a/packages/varlet-ui/varlet.config.mjs
+++ b/packages/varlet-ui/varlet.config.mjs
@@ -328,6 +328,14 @@ export default defineConfig({
         doc: 'list',
         type: 2,
       },
+      {
+        text: {
+          'zh-CN': 'VirtualList 虚拟滚动列表',
+          'en-US': 'VirtualList',
+        },
+        doc: 'virtual-list',
+        type: 2,
+      },
       {
         text: {
           'zh-CN': 'Swipe 轮播',