Question

背景：我正在使用Swipe.js和Infinite Ajax Scroll（JQ）制作一个投资组合网站。

问题：当额外页面的内容加载到当前页面时，已加载的Swipe.js脚本不会处理它。这意味着新内容没有更改标记（滑动功能需要工作）。

我想我需要在每次重新加载页面后触发Swipe.js脚本。那能解决吗？请向我解释一下，我是一个8岁的老人。 JS不是一个强大的诉讼......

您可以看到，当页面加载新内容时，滑块两侧的按钮不再有效。

Answer 1

是的，你是对的，加载图像后你必须在这些新元素上创建一个新的Swipe实例（因为它们在页面加载时不在开头）。
根据无限滚动的文档，您可以使用onRenderComplete。

所以你有这样的jQuery.ias构造函数：

jQuery.ias({
  // ... your settings...
  onRenderComplete: function(items) {
    $(items).each(function(index, element) {
      new Swipe(element);
    });
  }
});

这应该以这种方式工作，但我不完全确定;我还没有使用过这些库。

修改：
在对代码进行一些检查之后，我看到你有一些内联点击处理程序，如：onclick='two.prev();return false;'。

您需要将其删除并在同一onclick函数中添加onRenderComplete句柄。

onRenderComplete: function(items) { var swipe; $(items).each(function(index, element) { swipe = new Swipe(element); }); // find tags with the class 'forward' inside the current element and add the handler $(element).find('.forward').on('click', function() { swipe.next(); }); // ... also for previous }

顺便说一句：通常你应该提供一个jsFiddle来包含你的重要代码部分，这样我们就可以更容易地解决问题，并且在链接时问题并没有得到解决页面更改。

无限滚动+ Swipe.js

1 个答案: