Laravel和Infinite Scroll

Question

我有一个关于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 .box的div #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页面的示例(并替换应该替换的内容),但这样做绝对没有效果.

Answer 1

还有一种方法可以使用另一个无限滚动插件https://github.com/pklauzinski/jscroll来实现它.

假设你有一个简单的Blade视图:

<div class="scroll">
<ol>
    @foreach($media as $m)
        <li>{{$m->title}}</li>
    @endforeach
</ol>

{{$media->links()}}
</div>

我们可以使用以下JS代码实现无限滚动

<?=HTML::script('<YOUR PATH HERE>jquery.jscroll/jquery.jscroll.min.js');?>
<script type="text/javascript">
$(function() {
    $('.scroll').jscroll({
        autoTrigger: true,
        nextSelector: '.pagination li.active + li a', 
        contentSelector: 'div.scroll',
        callback: function() {
            $('ul.pagination:visible:first').hide();
        }
    });
});
</script>

该nextSelector属性将选择默认的Laravel分页下一个页面链接,contentSelector仅选择所需的内容,以及回调函数隐藏页面的内容(我不得不手动将其隐藏,因为他们的属性pagingSelector似乎是对我无效).您可以在插件的主页上找到模式详细信息.

Answer 2

我找到了解决方案(适合你,未来的人):

$('#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');
    }

希望有一天能帮助别人!