原生js触底加载列表实现（可直接复制）

触底加载列表实现

简介

在现代网页设计中，触底加载是一种常见的功能，它允许用户在浏览长列表时，当滚动到页面底部时自动加载更多内容。这种技术可以提高用户体验，减少一次性加载大量数据带来的延迟。本文将介绍如何使用HTML、CSS和JavaScript实现一个简单的触底加载列表。

实现思路

1. HTML结构：创建一个容器div来展示列表项，以及一个加载提示div。
2. CSS样式：设置列表容器的最大高度和滚动条，以及列表项的基本样式。
3. JavaScript逻辑：
   • 初始加载一定数量的列表项。
   • 使用节流函数监听滚动事件，以减少事件触发的频率。
   • 当用户滚动到列表底部时，加载更多列表项。

详细步骤

HTML

<div id="list-container">
  <!-- 列表项将通过JavaScript动态添加 -->
</div>
<div id="loading" style="display: none;">加载中...</div>

CSS

body {
    
    
  font-family: Arial, sans-serif;
}

#list-container {
    
    
  max-height: 400px;
  overflow-y: auto;
}

.item {
    
    
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

JavaScript

document.addEventListener('DOMContentLoaded', function () {
    
    
  const listContainer = document.getElementById('list-container');
  const loading = document.getElementById('loading');
  let page = 1;
  const limit = 10; // 每页加载的项目数

  function loadItems() {
    
    
    loading.style.display = 'block';
    // 模拟异步请求
    setTimeout(() => {
    
    
      for (let i = 0; i < limit; i++) {
    
    
        const item = document.createElement('div');
        item.classList.add('item');
        item.textContent = `项目 ${
      
      (page - 1) * limit + i}`;
        listContainer.appendChild(item);
      }
      page++;
      loading.style.display = 'none';
    }, 1000);
  }

  loadItems(); // 初始加载

  // 使用节流函数监听滚动事件
  listContainer.addEventListener('scroll', throttle(function () {
    
    
    if (listContainer.scrollTop + listContainer.clientHeight >= listContainer.scrollHeight) {
    
    
      loadItems();
    }
  }, 200)); // 200毫秒的节流延迟
});

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

解释

• HTML：定义了两个div元素，一个用于显示列表项，另一个用于显示加载状态。
• CSS：设置了列表容器的最大高度和滚动条，以及列表项的样式。
• JavaScript：
  • loadItems函数用于加载列表项。它首先显示加载提示，然后模拟异步请求（使用setTimeout），最后将新项目添加到列表容器中。
  • throttle函数用于节流滚动事件，确保在200毫秒内最多触发一次事件处理函数。当用户滚动到列表底部时，会调用loadItems函数加载更多项目。