无限滚动插件使用自定义查询修改路径答案

【问题标题】：Infinite scroll plugin modify the path with custom query无限滚动插件使用自定义查询修改路径
【发布时间】：2023-04-10 22:43:01
【问题描述】：

我正在使用带有 jQuery isotope 的无限滚动插件 (infinite-scroll)，我想知道当用户向下滚动页面以查看更多项目时，是否可以使用自定义查询参数修改路径。

有没有办法访问路径并修改其中一个查询参数。它第一次访问路径正常，返回第一组项目，然后它访问下一页，1,2 3 ok，但使用我第一次使用的相同查询参数只更新页码。

我想在点击第 3 页或第 4 页时修改其中一个参数：

var customPath = path + "?type=items&category=clothes&pageNumber=";

我是不是走错了路？

这是我的代码：

$container.infinitescroll({
    navSelector: '#page_nav', // selector for the paged navigation 
    nextSelector: '#page_nav a', // selector for the NEXT link (to page 2)
    itemSelector: '.element', // selector for all items you'll retrieve
    loading: {
        finishedMsg: 'No more categories to load.',
        msgText: "<em>Loading the next set of categories...</em>",
        img: 'http://i.imgur.com/qkKy8.gif'
    },
    pathParse: function (path, nextPage) {
        var customPath = path + "?type=items&category=all&pageNumber=";
        path = [customPath, '#contaner'];
        return path;
    }
},
// call Isotope as a callback
function (newElements) {
    $container.isotope('appended', $(newElements));
});

【问题讨论】：

你的 customPath 是非法的 js 语法。你不能在这样的双引号内有“鞋子”。只需删除双引号就可以了。 ('&category=shoes&') 我认为你没有提供足够的信息让我理解。您是说当用户到达第 3 页时，您想将类别从“衣服”更改为“鞋子”？这是否意味着你想留在衣服的第 3 页而不是鞋子的第 3 页？你到底想做什么？
对不起，这是我这边的一个错误，我删除了引号。最初，当用户看到页面时，页面上有来自不同类别的 30 个项目。现在页面上有一个按钮，当用户单击它时，项目将被过滤，并且只显示类别服装的项目。现在，当用户向下滚动时，我需要获取接下来的 30 个项目，但我需要修改路径查询，因此我只会获取类别衣服的项目，而不是获取所有项目。
我对无限滚动知之甚少，无法回答，但这里有一个问题可能会有所帮助。 stackoverflow.com/questions/11397648/…
谢谢，我可以稍微破解一下插件，让它做我想做的事。

标签： jquery scroll jquery-isotope infinite-scroll infinite

【解决方案1】：

好的，所以我不得不做一些小技巧，但感谢 Rich 为我指出了相关问题，我让它满足了我的需求。

我在这里为 jquery.infinitescroll.js 原型添加了一些额外的属性：

//line 67
 $.infinitescroll.prototype = {
       //My custom parameters
        pageType: "&type=items",
        categoryParam: "&category=shoes",
        /*  
            ----------------------------
            Private methods
            ----------------------------
            */

然后在函数里面调用：

retrieve: function infscr_retrieve(pageNum) {}

有一个变量：

desturl = path.join(opts.state.currPage)

改成

desturl = path.join(opts.state.currPage + $.infinitescroll.prototype.pageType + $.infinitescroll.prototype.categoryParam);

这将在 desturl 的末尾添加您的附加查询参数。

然后从你有 JavaScript 的页面中，你可以做这样的事情：

$('#filters a').click(function () {
    $.infinitescroll.prototype.pageType = "&type=products" ;                  
    $.infinitescroll.prototype.pageType = "&category=clothes";                           
     return false;
});

这将使用您的自定义查询更新下一页的查询参数。

希望这会对某人有所帮助。

【讨论】：