js 实现listview

使用 JavaScript 实现 ListView

ListView 是一种常见的 UI 组件，用于展示列表数据。以下是几种实现方式：

使用原生 JavaScript 动态创建列表

// 数据源
const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

// 获取容器元素
const listContainer = document.getElementById('list-container');

// 创建 ul 元素
const ul = document.createElement('ul');

// 遍历数据创建 li 元素
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  ul.appendChild(li);
});

// 将 ul 添加到容器中
listContainer.appendChild(ul);

使用模板字符串高效渲染

const items = ['Apple', 'Banana', 'Orange', 'Grape'];

function renderList(items) {
  const html = items.map(item => `<li>${item}</li>`).join('');
  document.getElementById('list-container').innerHTML = `<ul>${html}</ul>`;
}

renderList(items);

实现可复用的 ListView 类

class ListView {
  constructor(containerId, items) {
    this.container = document.getElementById(containerId);
    this.items = items;
  }

  render() {
    const listHtml = this.items.map(item => `
      <div class="list-item">
        <span>${item}</span>
      </div>
    `).join('');

    this.container.innerHTML = listHtml;
  }

  updateItems(newItems) {
    this.items = newItems;
    this.render();
  }
}

// 使用示例
const myListView = new ListView('list-container', ['Red', 'Green', 'Blue']);
myListView.render();

添加点击事件处理

function createInteractiveList(items) {
  const list = document.createElement('ul');

  items.forEach((item, index) => {
    const li = document.createElement('li');
    li.textContent = item;
    li.addEventListener('click', () => {
      console.log(`Item ${index + 1} clicked: ${item}`);
      li.classList.toggle('selected');
    });
    list.appendChild(li);
  });

  document.body.appendChild(list);
}

实现虚拟滚动优化性能

对于大型列表，可以使用虚拟滚动技术：

class VirtualListView {
  constructor(containerId, items, itemHeight = 50, visibleItems = 10) {
    this.container = document.getElementById(containerId);
    this.items = items;
    this.itemHeight = itemHeight;
    this.visibleItems = visibleItems;
    this.scrollTop = 0;

    this.init();
  }

  init() {
    this.container.style.height = `${this.visibleItems * this.itemHeight}px`;
    this.container.style.overflow = 'auto';

    this.container.addEventListener('scroll', () => {
      this.scrollTop = this.container.scrollTop;
      this.render();
    });

    this.render();
  }

  render() {
    const startIndex = Math.floor(this.scrollTop / this.itemHeight);
    const endIndex = Math.min(
      startIndex + this.visibleItems + 2, // 缓冲2个项目
      this.items.length
    );

    const visibleItems = this.items.slice(startIndex, endIndex);

    const listHeight = this.items.length * this.itemHeight;
    const offsetY = startIndex * this.itemHeight;

    this.container.innerHTML = `
      <div style="height: ${listHeight}px; position: relative;">
        <div style="position: absolute; top: ${offsetY}px; width: 100%;">
          ${visibleItems.map((item, i) => `
            <div style="height: ${this.itemHeight}px;">${item}</div>
          `).join('')}
        </div>
      </div>
    `;
  }
}

使用现代 JavaScript 特性简化代码

ES6+ 提供了更简洁的语法：

const ListComponent = ({ items }) => {
  const container = document.createElement('div');

  container.innerHTML = `
    <ul>
      ${items.map(item => `<li>${item}</li>`).join('')}
    </ul>
  `;

  return container;
};

document.body.appendChild(
  ListComponent({ items: ['One', 'Two', 'Three'] })
);

这些方法展示了从简单到复杂的 ListView 实现方式，可以根据具体需求选择合适的方案。对于生产环境，建议考虑使用现有框架（如 React、Vue 等）中的列表组件，它们通常已经优化了性能和功能。