当前位置：首页 > JavaScript

js实现recyclerview

2026-02-01 05:39:13JavaScript

实现 RecyclerView 的 JavaScript 方案

在 JavaScript 中实现类似 Android RecyclerView 的功能，可以通过虚拟滚动（Virtual Scrolling）技术优化长列表性能。以下是两种常见实现方式：

使用现有库（推荐）

react-window（React 生态）
适用于 React 项目的高性能虚拟列表库：

js实现recyclerview

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const VirtualList = () => (
  <List
    height={600}
    itemCount={1000}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);

vue-virtual-scroller（Vue 生态）
Vue 的虚拟滚动解决方案：

<template>
  <RecycleScroller
    class="scroller"
    :items="items"
    :item-size="32"
    key-field="id"
  >
    <template v-slot="{ item }">
      <div class="item">{{ item.name }}</div>
    </template>
  </RecycleScroller>
</template>

手动实现核心逻辑

DOM 结构准备
创建固定高度的容器和动态内容区域：

js实现recyclerview

<div id="viewport" style="height: 500px; overflow: auto;">
  <div id="content" style="height: 0;"></div>
  <div id="items-container"></div>
</div>

计算可见区域
监听滚动事件并计算当前应渲染的索引范围：

const itemHeight = 50;
const totalItems = 10000;
const viewport = document.getElementById('viewport');

viewport.addEventListener('scroll', () => {
  const scrollTop = viewport.scrollTop;
  const startIdx = Math.floor(scrollTop / itemHeight);
  const endIdx = Math.min(
    startIdx + Math.ceil(viewport.clientHeight / itemHeight),
    totalItems
  );
  renderItems(startIdx, endIdx);
});

动态渲染项
仅渲染可见项并通过 translateY 定位：

function renderItems(start, end) {
  const container = document.getElementById('items-container');
  container.innerHTML = '';

  for (let i = start; i <= end; i++) {
    const item = document.createElement('div');
    item.style.height = `${itemHeight}px`;
    item.style.transform = `translateY(${i * itemHeight}px)`;
    item.textContent = `Item ${i}`;
    container.appendChild(item);
  }

  document.getElementById('content').style.height = `${totalItems * itemHeight}px`;
}

关键优化点

回收 DOM 节点：复用已创建的 DOM 元素而非重新创建
请求动画帧：使用 requestAnimationFrame 节流滚动事件
预加载：提前渲染可视区域外的部分项（如上下 2-3 屏）

// 示例：使用 requestAnimationFrame 优化
let lastScrollTime = 0;
viewport.addEventListener('scroll', () => {
  const now = Date.now();
  if (now - lastScrollTime > 16) { // 约60fps
    requestAnimationFrame(updateVisibleItems);
    lastScrollTime = now;
  }
});