无限滚动插件使用自定义查询修改路径 [英] Infinite scroll plugin modify the path with custom query

问题描述

我正在将无限滚动插件(无限滚动)与jQuery同位素一起使用，并想知道如果可以在用户向下滚动页面以查看更多项目时使用自定义查询参数修改路径.

I am using the infinite scroll plugin (infinite-scroll) with jQuery isotope and was wondering if it's possible to modify the path with custom query parameters as user scrolls down the page to view more items.

是否有访问路径和修改查询参数之一的方法. 第一次返回路径返回第一组项目，然后到达下一页，即1,2 3，这是正确的，但使用的是我第一次使用的相同查询参数，只是更新了页码.

Is there a way to access the path and modify one of the query parameter. It's hitting the path ok for the first time returning the first set of items and after that it hitting the next pages , 1,2 3 ok but using the same query parameters I used for the first time only updating the page number.

当我点击第3或第4页时，我想修改以下参数之一:

I would like to modify one of the parameter when hitting page 3 or 4 with something like this:

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));
});

推荐答案

好，所以我不得不做一点修改，但是由于Rich向我指出了相关问题，我才能够满足我的需要.

Ok so I had to do a little hack but I got it working for my needs thanks to Rich for pointing me to the related question.

我在这里向jquery.infinitescroll.js原型添加了一些其他属性:

I added some additional properties to the jquery.infinitescroll.js prototype here:

//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);

这会将您的其他查询参数添加到目标网址的末尾.

This will add your additional query parameters at the end of the desturl.

然后在您拥有JavaScript的页面上执行以下操作:

Then from you page where you have you JavaScript you can do something like this:

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

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

This will update the query parameters of the next page with you custom queries.

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

Hope this will help someone.

这篇关于无限滚动插件使用自定义查询修改路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！