如何使用Infinite Ajax Scroll JSON示例中的nextHandler功能？

核心逻辑说明 #

你可以通过IAS暴露的load自定义加载钩子完全接管数据拉取、渲染逻辑，无需使用IAS默认的固定URL拉取HTML逻辑，刚好适配你将items存储在WordPress Transient中的场景。官方JSON示例中提到的handler本质就是这个自定义load配置，它接收当前页码作为入参，返回携带DOM节点数组的Promise即可触发IAS自动渲染。

完整实现代码 #

WordPress后端接口实现 #

首先需要注册一个AJAX接口用于读取Transient中的items数据，返回JSON格式：

// 注册支持访客调用的AJAX接口
add_action('wp_ajax_nopriv_get_transient_items', 'my_fetch_custom_items');
add_action('wp_ajax_get_transient_items', 'my_fetch_custom_items');
function my_fetch_custom_items() {
    // 校验分页参数，可自行添加请求签名校验提升安全性
    $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $per_page = 10; // 可自定义每页加载数量
    $offset = ($paged - 1) * $per_page;

    // 读取存储在Transient中的全量items数据，替换为你自己的Transient key
    $all_items = get_transient('your_custom_items_key');
    if (empty($all_items)) wp_send_json_error('无数据');

    // 按分页规则切割数据
    $current_page_items = array_slice($all_items, $offset, $per_page);
    $has_next_page = count($all_items) > ($offset + $per_page);

    // 返回JSON结果
    wp_send_json_success([
        'items' => $current_page_items,
        'has_next' => $has_next_page,
        'current_page' => $paged
    ]);
}

前端IAS配置代码 #

初始化IAS时传入自定义load配置，接管整个加载渲染流程：

const ias = new InfiniteAjaxScroll('.list-container', { // 替换为你的列表外层容器选择器
  item: '.list-item', // 替换为你单个item的类名
  next: '.fake-next', // 无需真实存在，填一个占位选择器即可
  pagination: '.fake-pagination', // 无需真实存在，填一个占位选择器即可

  // 自定义加载handler，即官方示例提到的自定义处理逻辑
  load: function(page) {
    return new Promise((resolve, reject) => {
      jQuery.ajax({
        url: '/wp-admin/admin-ajax.php', // WordPress默认AJAX接口地址
        type: 'POST',
        data: {
          action: 'get_transient_items',
          page: page
        },
        success: res => {
          if (!res.success || !res.data.items.length) {
            // 无数据时终止加载
            return reject();
          }

          // 自定义渲染逻辑，将JSON数据拼接为item的HTML字符串
          let itemHtml = '';
          res.data.items.forEach(item => {
            // 替换为你自己的item结构
            itemHtml += `
              <div class="list-item">
                <h4>${item.post_title}</h4>
                <div class="item-content">${item.post_content}</div>
              </div>
            `;
          });

          // 将HTML转为DOM节点数组返回给IAS，IAS会自动插入到容器中
          const nodes = new DOMParser()
            .parseFromString(itemHtml, 'text/html')
            .querySelectorAll('.list-item');
          resolve(Array.from(nodes));

          // 无下一页时关闭IAS加载监听
          if (!res.data.has_next) {
            ias.disable();
          }
        },
        error: reject
      })
    })
  }
});

// 可选：监听新item渲染完成事件，可用于绑定新节点的点击事件等逻辑
ias.on('rendered', () => {
  // 你的后置逻辑
});

关键注意事项 #

• load方法必须返回Promise，resolve时传入的必须是DOM节点数组，不能直接传HTML字符串
• 如果你的item渲染逻辑比较复杂，也可以用前端模板引擎来生成HTML，无需手动拼接
• 可以通过IAS的其他事件钩子实现加载动画、加载完成提示等自定义效果

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