怎么实现

以下是一个简单的实现方式：

HTML部分：

<div id="post-list">
  <!-- 这里是初始的帖子列表 -->
</div>

<div id="loading">Loading...</div>

CSS部分：

#loading {
  display: none;
  text-align: center;
  font-size: 20px;
  margin: 20px 0;
}

JavaScript部分：

// 定义变量追踪当前显示的帖子数量
var shownPosts = 10;

// 监听滚动事件
window.addEventListener('scroll', function() {
  // 判断是否滚动到了页面底部
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    // 显示 loading 提示信息
    document.getElementById('loading').style.display = 'block';

    // 发送 AJAX 请求获取新的帖子列表数据
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/get-posts?start=' + shownPosts + '&count=10');
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 隐藏 loading 提示信息
        document.getElementById('loading').style.display = 'none';

        // 渲染新的帖子列表数据
        var newPosts = JSON.parse(xhr.responseText);
        var postList = document.getElementById('post-list');
        for (var i = 0; i < newPosts.length; i++) {
          var post = document.createElement('div');
          post.innerHTML = newPosts[i].title;
          postList.appendChild(post);
        }

        // 更新当前显示的帖子数量
        shownPosts += newPosts.length;
      }
    };
    xhr.send();
  }
});

上述代码中，我们定义了一个变量 `shownPosts` 来追踪当前已经显示的帖子数量，初始值为 `10`。然后我们监听了 `scroll` 事件，当用户滚动到页面底部时，就会触发这个事件。在事件处理函数中，我们显示了一个 loading 的提示信息，并使用 AJAX 发送请求获取新的帖子列表数据。请求的 URL 中包含了两个参数，`start` 和 `count`，分别表示新的帖子列表数据的起始位置和数量。然后我们将获取到的新的帖子列表数据渲染到页面中，并更新当前显示的帖子数量。

需要注意的是，在实际情况中，我们需要根据后端接口的具体实现来调整 AJAX 请求的参数和响应数据的处理方式。同时，我们还需要为滚动事件添加一些节流和防抖的措施，以避免频繁发送请求和渲染数据导致的性能问题。