前端虚拟列表实现的思路及完整代码

// 可显示的列表项数量
visibleCount = Math.ceil(viewportHeight / itemHeight)

// 起始索引
startIndex = Math.floor(scrollTop / itemHeight)

// 结束索引
endIndex = startIndex + visibleCount

// 偏移量
offset = scrollTop - (scrollTop % itemHeight)

<div class="viewport" @scroll="handleScroll">
  <div class="scroll-list" :style="{ height: totalHeight + 'px' }">
    <div class="scroll-content" :style="{ transform: `translateY(${offset}px)` }">
      <!-- 渲染区域列表项 -->
    </div>
  </div>
</div>

class VirtualList {
  constructor(options) {
    this.itemHeight = options.itemHeight;
    this.total = options.total;
    this.viewport = options.viewport;
    this.buffer = options.buffer || 5;
    
    this.viewportHeight = this.viewport.clientHeight;
    this.visibleCount = Math.ceil(this.viewportHeight / this.itemHeight);
    this.startIndex = 0;
    this.endIndex = this.startIndex + this.visibleCount + this.buffer;
    this.offset = 0;
    
    this.initDom();
    this.bindEvents();
  }
  
  initDom() {
    this.scrollList = document.createElement('div');
    this.scrollList.className = 'scroll-list';
    this.scrollList.style.height = this.total * this.itemHeight + 'px';
    
    this.scrollContent = document.createElement('div');
    this.scrollContent.className = 'scroll-content';
    
    this.scrollList.appendChild(this.scrollContent);
    this.viewport.appendChild(this.scrollList);
  }
  
  bindEvents() {
    this.viewport.addEventListener('scroll', this.handleScroll.bind(this));
  }
  
  handleScroll() {
    const scrollTop = this.viewport.scrollTop;
    this.startIndex = Math.floor(scrollTop / this.itemHeight);
    this.endIndex = this.startIndex + this.visibleCount + this.buffer;
    this.offset = this.startIndex * this.itemHeight;
    
    this.updateContent();
  }
  
  updateContent() {
    const visibleData = this.getVisibleData();
    this.scrollContent.style.transform = `translateY(${this.offset}px)`;
    // 更新列表内容
    this.renderData(visibleData);
  }
  
  getVisibleData() {
    return this.data.slice(this.startIndex, this.endIndex);
  }
  
  renderData(data) {
    // 根据数据渲染DOM
  }
}

const bufferSize = 5;
startIndex = Math.max(0, startIndex - bufferSize);
endIndex = Math.min(total, endIndex + bufferSize);

class DynamicVirtualList {
  constructor() {
    this.heightCache = new Map();
    this.estimatedHeight = 100;
  }
  
  updatePosition() {
    let totalHeight = 0;
    for (let i = 0; i < this.startIndex; i++) {
      totalHeight += this.getItemHeight(i);
    }
    this.offset = totalHeight;
  }
  
  getItemHeight(index) {
    return this.heightCache.get(index) || this.estimatedHeight;
  }
}

function throttle(fn, delay) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, arguments);
        timer = null;
      }, delay);
    }
  }
}

handleScroll = throttle(function() {
  // 滚动处理逻辑
}, 16);