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

Vas*_*aur 5 jquery scroll infinite infinite-scroll jquery-isotope

我正在使用jQuery同位素的无限滚动插件(无限滚动),并想知道是否可以使用自定义查询参数修改路径,因为用户向下滚动页面以查看更多项目.

有没有办法访问路径并修改其中一个查询参数.第一次返回第一组项目并且之后它命中了下一页,1,2 3确定但是使用我第一次使用的相同查询参数仅更新页码.

我想在点击第3页或第4页时修改其中一个参数,如下所示:

var customPath = path + "?type=items&category=clothes&pageNumber=";
Run Code Online (Sandbox Code Playgroud)

我是以错误的方式接近这个吗?

这是我的代码:

$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));
});
Run Code Online (Sandbox Code Playgroud)

Vas*_*aur 7

好的,所以我不得不做一点点黑客,但我得到了它为我的需求工作,感谢Rich指出我的相关问题.

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

//line 67
 $.infinitescroll.prototype = {
       //My custom parameters
        pageType: "&type=items",
        categoryParam: "&category=shoes",
        /*  
            ----------------------------
            Private methods
            ----------------------------
            */
Run Code Online (Sandbox Code Playgroud)

然后在函数内部调用:

retrieve: function infscr_retrieve(pageNum) {}
Run Code Online (Sandbox Code Playgroud)

有一个变量:

desturl = path.join(opts.state.currPage)
Run Code Online (Sandbox Code Playgroud)

把它改成了

desturl = path.join(opts.state.currPage + $.infinitescroll.prototype.pageType + $.infinitescroll.prototype.categoryParam);
Run Code Online (Sandbox Code Playgroud)

这将在desturl的末尾添加您的其他查询参数.

然后,从您拥有JavaScript的页面,您可以执行以下操作:

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

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

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