无限滚动加载

无限滚动模式提供了一种在用户滚动操作时动态加载内容的方法。

让我们关注最后一行（或内容的最后一个元素）：

<tr hx-get="/contacts/?page=2"
    hx-trigger="revealed"
    hx-swap="afterend">
  <td>Agent Smith</td>
  <td>[email protected]</td>
  <td>55F49448C0</td>
</tr>

最后一个元素包含一个监听器，当滚动到视图中时，它将触发请求。然后将结果附加在其后。结果的最后一个元素本身将包含监听器以加载下一页结果，依此类推。

revealed - 当元素滚动到视口中时触发（对于延迟加载也很有用）。如果你在 css 中使用 overflow，比如：overflow-y: scroll 则应使用 intersect once 而不是 revealed。

演示