<template>     <div ref="list" class="infinite-list-container" @scroll="scrollEvent">         <!-- 占位元素，撑开滚动容器的高度，提供正确的滚动条范围 -->         <div             class="infinite-list-phantom"             :style="{ height: listHeight + 'px' }"         ></div>         <!-- 实际渲染的可见列表项容器 -->         <div class="infinite-list" :style="{ transform: getTransform }">             <!-- 使用插槽渲染列表项，允许父组件自定义每个列表项的显示 -->             <slot v-for="data in visibleData" :data="data" :key="data.id || JSON.stringify(data)"/>         </div>     </div> </template>  <script> export default {     name: "VirtualList",     props: {         // 待遍历的完整数据集         listData: {             type: Array,             default: () => [],             required: true,         },         // 每个列表项的固定高度（为简化计算，假设高度固定）         itemHeight: {             type: Number,             default: 20, // 默认每个item高度20px             required: true,         },     },     data() {         return {             screenHeight: 0, // 可视区域高度             startOffset: 0,  // 列表项相对于容器顶部的偏移量             start: 0,        // 可视区域内第一个列表项的索引             end: null,       // 可视区域内最后一个列表项的索引         };     },     computed: {         // 整个列表的理论总高度，用于设置占位元素的高度         listHeight() {             return this.listData.length * this.itemHeight;         },         // 可视区域内可容纳的列表项数量         visibleCount() {             return Math.ceil(this.screenHeight / this.itemHeight);         },         // 实际渲染列表容器的CSS transform样式，实现滚动效果         getTransform() {             return `translate3d(0,${this.startOffset}px,0)`;         },         // 当前可视区域内需要渲染的数据子集         visibleData() {             // 确保end索引不超过listData的实际长度             return this.listData.slice(                 this.start,                 Math.min(this.end, this.listData.length)             );         },     },     mounted() {         // 组件挂载后，获取滚动容器的实际高度         this.screenHeight = this.$el.clientHeight;         // 初始化可视区域的起始和结束索引         this.start = 0;         this.end = this.start + this.visibleCount;     },     methods: {         /**          * 滚动事件处理函数          * 根据滚动位置计算需要渲染的列表项范围和偏移量          */         scrollEvent() {             // 获取当前滚动条的垂直位置             let scrollTop = this.$refs.list.scrollTop;             // 计算可视区域内第一个列表项的索引             this.start = Math.floor(scrollTop / this.itemHeight);             // 计算可视区域内最后一个列表项的索引             this.end = this.start + this.visibleCount;             // 计算实际渲染列表容器的偏移量，实现平滑滚动             this.startOffset = scrollTop - (scrollTop % this.itemHeight);         },     }, }; </script>  <style scoped> .infinite-list-container {     height: 100%; /* 确保容器有固定高度，并允许内部滚动 */     overflow: auto;     position: relative; /* 为内部绝对定位元素提供定位上下文 */     -webkit-overflow-scrolling: touch; /* 提升移动端滚动体验 */ }  .infinite-list-phantom {     position: absolute;     left: 0;     top: 0;     right: 0;     z-index: -1; /* 确保它在实际列表项的下方 */ }  .infinite-list {     left: 0;     right: 0;     top: 0;     position: absolute;     text-align: center; /* 示例，可根据实际需求调整 */ } </style>

<template>     <div class="app-container">         <!-- 第一个虚拟滚动列 -->         <div class="column">             <h3>供应商列表 ({{ suppliers.length }} 条)</h3>             <VirtualList :listData="suppliers" :itemHeight="30">                 <!-- 使用 v-slot 渲染每个供应商项 -->                 <template v-slot:default="{ data }">                     <div class="list-item">                         {{ data.id }} - {{ data.name }}                     </div>                 </template>             </VirtualList>         </div>          <!-- 第二个虚拟滚动列 -->         <div class="column">             <h3>客户列表 ({{ clients.length }} 条)</h3>             <VirtualList :listData="clients" :itemHeight="30">                 <!-- 使用 v-slot 渲染每个客户项 -->                 <template v-slot:default="{ data }">                     <div class="list-item">                         {{ data.id }} - {{ data.company }}                     </div>                 </template>             </VirtualList>         </div>     </div> </template>  <script> import VirtualList from './VirtualList.vue'; // 假设VirtualList.vue在同级目录  export default {     components: {         VirtualList,     },     data() {         return {             suppliers: [], // 假设这是从数据库加载的2000个对象             clients: [],   // 假设这是从数据库加载的58000个对象         };     },     mounted() {         // 模拟数据加载         this.loadInitialData();     },     methods: {         loadInitialData() {             // 生成模拟数据             for (let i = 0; i < 2000; i++) {                 this.suppliers.push({ id: i + 1, name: `Supplier ${i + 1}` });             }             for (let i = 0; i < 58000; i++) {                 this.clients.push({ id: i + 1, company: `Client Company ${i + 1}` });             }         },         // 如果需要实现“加载更多”功能，可以在父组件中监听VirtualList的滚动事件         // 或者在VirtualList内部添加一个“滚动到底部”的事件触发，         // 当滚动接近底部时，父组件可以请求更多数据并追加到 listData 中。         // 但对于纯粹的虚拟滚动，所有数据通常一次性提供给 listData。     }, }; </script>  <style> .app-container {     display: flex;     height: 74vh; /* 假设应用容器的高度为74vh */     gap: 20px; }  .column {     flex: 1; /* 两列平分宽度 */     border: 1px solid #eee;     padding: 10px;     display: flex;     flex-direction: column; }  .column h3 {     margin-top: 0;     margin-bottom: 10px;     text-align: center; }  .list-item {     height: 30px; /* 必须与 VirtualList 的 itemHeight prop 匹配 */     line-height: 30px;     border-bottom: 1px solid #f0f0f0;     padding-left: 10px;     box-sizing: border-box; }  .list-item:nth-child(even) {     background-color: #f9f9f9; } </style>

大家都在看：