无限滚动功能仅在首页答案

【问题标题】：Infinite Scroll functions only in the front page无限滚动功能仅在首页
【发布时间】：2012-08-19 13:50:05
【问题描述】：

我在 tumblr 博客中使用无限滚动插件，只要用户在首页，一切正常 - 例如：“{someblog}.tumblr.com”。

从“{someblog}.tumblr.com/page/2”等开始，插件似乎根本没有加载（它没有隐藏导航元素）。初始化这是我用来调用它的代码：

$('#container').infinitescroll({
loading: {
            finished: undefined,
            finishedMsg: "Finished",
            img: "preloader.gif",
            msg: null,
            msgText: "Loading...",
            selector: null,
            speed: 'fast',
            start: undefined
        },
         state: {
            isDuringAjax: false,
            isInvalidPage: false,
            isDestroyed: false,
            isDone: false, // For when it goes all the way through the archive.
            isPaused: false,
            currPage: 1
         },
        callback: undefined,
        debug: false,
        behavior: undefined,
        binder: $(window), // used to cache the selector
        nextSelector: "#next a",
        navSelector: ".navigation",
        contentSelector: "#container", // rename to pageFragment
        itemSelector: "div.post",
        animate: false,
        pathParse: undefined,
        dataType: 'html',
        appendCallback: true,
        bufferPx: 400
    },
...

编辑：我启用了调试信息，我得到了以下信息：

({0:"抱歉，我们无法解析您的下一篇（上一篇）网址。验证您的 css 选择器指向正确的 A 标记。如果您仍然收到此错误：大喊大叫，并请求在infinite-scroll.com 上的帮助。"})

({0:"determinePath", 1:"/page/4"})

({0:"绑定", 1:"绑定"}

似乎它确实找到了下一页的地址-“/page/4”（因为我在第3页）。但是由于某种原因它不能“解析”它？

插件是否可能只能在第一页上运行，而下一页的链接包含“2”？如果是这样，我该如何覆盖它？

提前非常感谢！

【问题讨论】：

我认为这是因为您在 /page/2 而不是根目录。这就是为什么它无法找出“路径”的原因。添加类似这样的内容让您更接近：debug: true, pathParse: function() { ["http://your-site.tumblr.com/page", ""] }
谢谢，它确实让我更接近了！但是当添加这个时，我得到一个错误：“TypeError：路径未定义”，它追溯到这一行：path = opts.path,，据我所知，无论我在初始化插件时在选项中指定什么，它都保持未定义。为什么会这样？

标签： javascript jquery tumblr infinite-scroll

【解决方案1】：

感谢@graygilmore，我想通了。这是需要添加到代码中的行：

pathParse: function() {
    return ['http://{Name}.tumblr.com/page/', '']
},

请注意，{Name} 是 Tumblr 变量，无需更改 - Tumblr 会自动替换它。

此外，这行应该添加到state: {...} 块中：

currPage: {CurrentPage}

（在我上面的问题中的示例中，我只是将其设置为“1”）。

{CurrentPage} 也是一个 Tumblr 变量，因此它会自动替换为当前页码，对于每个正在查看的页面。

现在 Infinite-Scroll 可以在博客的每个页面上正确加载，这在想要创建“加载更多帖子”按钮时特别有用，它可以让用户在常规（分页）导航和无限滚动之间进行选择。

【讨论】：