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

Question

我希望能够使用 Infinite Ajax Scroll 用于我正在处理的项目。

我一直在查看 Infinite Scroll JSON 示例 (https://infiniteajaxscroll.com/examples/json/)，但我发现很难理解它的工作原理。我想知道是否有关于如何使用示例中所示的 JS 或 jQuery 处理程序的任何进一步文档或代码示例。

最终我想做的是使用我自己的 ajax 函数加载我的容器“项目”，然后让 Infinite Ajax 滚动显示它们。我想这样做是因为我的容器“项目”不在 URL 中，而是保存为 Wordpress 瞬变。

非常感谢我能得到的任何帮助。

谢谢，大卫.

Answer 1

感谢您的提问。有关使用 nextHandler 的文档确实可以改进。无论如何，我会尝试解释它是如何工作的。

通常 IAS 使用选择器来查找下一页的 url。然后它加载页面并提取元素并将它们附加到 DOM。如果你使用 nextHandler，你将完全绕过这个行为。这意味着您必须自己获取数据（在本例中为 JSON）并在 DOM.

中插入新元素

这是一个带有注释的示例来解释它的作用。

首先，假设我们的电影 (1..n).json 具有以下格式：

[
  {
    Title: 'item1',
    Plot: 'description1'
  }, {
    Title: 'item2',
    Plot: 'description2'
  }
]

现在执行nextHandler：

import InfiniteAjaxScroll from "@webcreate/infinite-ajax-scroll";

function nextHandler(pageIndex) {
  // we use the fetch api to load the next page. Any http client library will do, like axios.
  return fetch("./static/movies"+pageIndex+".json")
    // use the response as json
    .then((response) => response.json())
    // process the actual json data
    .then((jsonData) => {
      // create an array to store our html elements in memory
      let elements = [];

      // we loop over the items in our json and create an html element for each item
      jsonData.forEach(function (item) {
        const template = `<div class="item">
          <h1>${item.Title}</h1>
          <p>${item.Plot}</p>
        </div>`;

        const element = document.createElement("div");
        element.innerHTML = template.trim();

        elements.push(element.firstChild);
      });

      // now use IAS's append method to insert the elements
      // it's import that we return the append result, as it's an promise
      return this.append(elements);
    })
    // page 3 returns a 404, returning false here indicates there are no more pages to load
    .catch(() => false);
}

window.ias = new InfiniteAjaxScroll(".container", {
  item: ".item",
  next: nextHandler,
  pagination: false
});

我还在Codesandbox上准备了一个互动demo：
https://codesandbox.io/s/serene-einstein-f73em

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

How to use the nextHandler functionality as shown in the Infinite Ajax Scroll JSON example

jquery-ias