如何基于分页JSON接口实现HTMX无限滚动加载？

你的代码只加载第一页的核心问题是触发请求的元素页码固定，没有随分页自动递增，且未处理后续分页的触发逻辑。以下是修正方案：

1. 修正HTML结构与模板逻辑 #

假设你的分页接口返回的JSON包含以下字段（需后端配合返回，或根据返回的rows数量判断是否有下一页）：

{
  "rows": [/* 文章列表数据 */],
  "currentPage": 0, // 当前页码
  "hasNextPage": true // 是否还有下一页
}

修改后的HTMX+Nunjucks代码：

<div hx-ext="client-side-templates">
  <!-- 初始触发加载第一页 -->
  <div 
    hx-get="http://localhost:8080/dev.bigcyprus.com.cy/web/api/v1/articles?page=0"
    hx-trigger="revealed" 
    hx-swap="afterend" 
    nunjucks-template="m_template"
  ></div>

  <template id="m_template">
    {% for row in rows %}
      <li>{{ row.title }}</li> <!-- 修正原代码的</l1>拼写错误为</li> -->
    {% endfor %}

    <!-- 仅当存在下一页时，渲染下一页的触发元素 -->
    {% if hasNextPage %}
      <div 
        hx-get="http://localhost:8080/dev.bigcyprus.com.cy/web/api/v1/articles?page={{ currentPage + 1 }}"
        hx-trigger="revealed" 
        hx-swap="afterend" 
        nunjucks-template="m_template"
      ></div>
    {% endif %}
  </template>
</div>

2. 关键逻辑说明 #

• 动态生成触发元素：每次渲染完当前页的列表后，根据接口返回的hasNextPage判断是否生成下一页的触发div，且自动计算下一页的页码（currentPage + 1），避免固定页码重复请求同一页。
• 终止滚动条件：当接口返回hasNextPage: false（或返回的rows数量小于每页设定值）时，不再生成新的触发元素，停止无限滚动。
• 修正HTML错误：原代码中</l1>是拼写错误，需改为</li>，否则会破坏HTML结构，影响后续渲染。

3. 无分页字段的替代方案 #

如果后端接口未返回currentPage和hasNextPage，可通过返回的rows数量判断：
假设每页固定返回10条数据，当返回的rows长度小于10时，视为最后一页：

<template id="m_template">
  {% for row in rows %}
    <li>{{ row.title }}</li>
  {% endfor %}

  {% if rows | length == 10 %} <!-- 假设每页10条，满10条则还有下一页 -->
    <div 
      hx-get="http://localhost:8080/dev.bigcyprus.com.cy/web/api/v1/articles?page={{ loop.parent.loop.index0 + 1 }}"
      hx-trigger="revealed" 
      hx-swap="afterend" 
      nunjucks-template="m_template"
    ></div>
  {% endif %}
</template>

注：这种情况下也可在触发元素上添加data-page属性存储当前页码，每次渲染时读取并递增，确保页码计算准确。

内容的提问来源于stack exchange，提问作者pierostz