Laravel和无限滚动 [英] Laravel and Infinite Scroll

问题描述

我有一个关于laravel分页和无限滚动的问题:

首先，我有这个:

<div class="row">   

<div id="boxes">

    @forelse($duels->results as $d)

        <div class="col-span-4 box notizy">

            @include('versus.versus')

        </div>



    @empty



    @endforelse

</div>

<div class="col-span-12">
    <div class="paginate text-center">
        {{$duels->links()}}
    </div>
</div>

我们可以看到，我有一个div #boxes，其中包含divs .box. 分页由Laravel设置，看起来像这样:

<div class="col-span-12">
    <div class="paginate text-center">
        <div class="pagination">
            <ul>
                <li class="previous_page disabled"><a href="#">&laquo; Previous</a></li>
                <li class="active"><a href="#">1</a></li> <li><a href="index.php?page=2">2</a></li>
                <li class="next_page"><a href="index.php?page=2">Next &raquo;</a></li>
            </ul>
            </div>      
      </div>
</div>

所以现在，我想放置一个无限滚动而不是一个分页. 我应该如何使用 https://github.com/paulirish/infinite-scroll ?

如果您有任何问题，我会留在这里！

PS:我已经尝试了一些方法，但是没有一个像这样:

    $('#boxes').infinitescroll({
    loading: {
        finished: undefined,
        finishedMsg: "<em>Congratulations, you've reached the end of the internet.</em>",
        msg: null,
        msgText: "<em>Loading the next set of posts...</em>",
        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
    },
    debug: false,
    behavior: undefined,
    binder: $(window), // used to cache the selector for the element that will be scrolling
    nextSelector: "div.paginate li.active a",
    navSelector: "div.paginate",
    contentSelector: null, // rename to pageFragment
    extraScrollPx: 0,
    itemSelector: "div.notizy",
    animate: false,
    pathParse: undefined,
    dataType: 'html',
    appendCallback: true,
    bufferPx: 40,
    errorCallback: function () { },
    infid: 0, //Instance ID
    pixelsFromNavToBottom: undefined,
    path: undefined, // Can either be an array of URL parts (e.g. ["/page/", "/"]) or a function that accepts the page number and returns a URL
    prefill: false, // When the document is smaller than the window, load data until the document is larger or links are exhausted
    maxPage:undefined // to manually control maximum page (when maxPage is undefined, maximum page limitation is not work)
});

基于github页面的示例(并替换了应替换的内容)，但是这样做绝对没有效果.

解决方案

我已经找到了解决方案(为您，未来的人们):

$('#boxes').infinitescroll({
    navSelector     : ".paginate",
    nextSelector    : ".paginate a:last",
    itemSelector    : ".box",
    debug           : false,
    dataType        : 'html',
    path: function(index) {
        return "?page=" + index;
    }
}, function(newElements, data, url){

    var $newElems = $( newElements );
    $('#boxes').masonry( 'appended', $newElems, true);

});

之所以有效，是因为:

• laravel 4的分页就像我们之前看到的
• laravel中的分页给出了类似于....?page = x
的网址

重要

您将遇到的错误是:

当您向下滚动到最后一页之外时，您可能会发现您一遍又一遍地翻遍最后一页，从而造成真正的无限滚动.

要解决此问题，请转到paginator.php(在laravel文件夹中)并按如下所示进行更改:

if (is_numeric($page) and $page > $last = ceil($total / $per_page))
    {
        return Response::error('404');
    }

希望有一天能对某人有所帮助！

I have a question about laravel pagination and infinite scroll :

First of all, I have this :

<div class="row">   

<div id="boxes">

    @forelse($duels->results as $d)

        <div class="col-span-4 box notizy">

            @include('versus.versus')

        </div>



    @empty



    @endforelse

</div>

<div class="col-span-12">
    <div class="paginate text-center">
        {{$duels->links()}}
    </div>
</div>

As we can see, I have a div #boxes which contain divs .box . The pagination is set by Laravel and looks like this :

<div class="col-span-12">
    <div class="paginate text-center">
        <div class="pagination">
            <ul>
                <li class="previous_page disabled"><a href="#">&laquo; Previous</a></li>
                <li class="active"><a href="#">1</a></li> <li><a href="index.php?page=2">2</a></li>
                <li class="next_page"><a href="index.php?page=2">Next &raquo;</a></li>
            </ul>
            </div>      
      </div>
</div>

So now, I want to put an infinite scroll instead of a pagination. How should I do using https://github.com/paulirish/infinite-scroll ?

I stay here if you have questions !

PS : I've tried a few things but none worked like :

    $('#boxes').infinitescroll({
    loading: {
        finished: undefined,
        finishedMsg: "<em>Congratulations, you've reached the end of the internet.</em>",
        msg: null,
        msgText: "<em>Loading the next set of posts...</em>",
        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
    },
    debug: false,
    behavior: undefined,
    binder: $(window), // used to cache the selector for the element that will be scrolling
    nextSelector: "div.paginate li.active a",
    navSelector: "div.paginate",
    contentSelector: null, // rename to pageFragment
    extraScrollPx: 0,
    itemSelector: "div.notizy",
    animate: false,
    pathParse: undefined,
    dataType: 'html',
    appendCallback: true,
    bufferPx: 40,
    errorCallback: function () { },
    infid: 0, //Instance ID
    pixelsFromNavToBottom: undefined,
    path: undefined, // Can either be an array of URL parts (e.g. ["/page/", "/"]) or a function that accepts the page number and returns a URL
    prefill: false, // When the document is smaller than the window, load data until the document is larger or links are exhausted
    maxPage:undefined // to manually control maximum page (when maxPage is undefined, maximum page limitation is not work)
});

Based on the example of the github page (and replacing what should be replace), but there's absolutely no effect doing so.

解决方案

I've found the solution (for you, people of the future) :

$('#boxes').infinitescroll({
    navSelector     : ".paginate",
    nextSelector    : ".paginate a:last",
    itemSelector    : ".box",
    debug           : false,
    dataType        : 'html',
    path: function(index) {
        return "?page=" + index;
    }
}, function(newElements, data, url){

    var $newElems = $( newElements );
    $('#boxes').masonry( 'appended', $newElems, true);

});

This works because :

• The pagination given by laravel 4 is like we saw before
• The pagination in laravel give an url like ....?page=x

IMPORTANT

The bug you will encounter is :

When you scroll down beyond what should be the last page, you’ll probably find that you keep getting the last page over and and over again, causing genuinely infinite scrolling.

to fix this, go to the paginator.php (in the laravel folder) and change it as follow :

if (is_numeric($page) and $page > $last = ceil($total / $per_page))
    {
        return Response::error('404');
    }

Hope it will help someone someday !

这篇关于Laravel和无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！