Laravel 和无限卷轴 [英] Laravel and Infinite Scroll

问题描述

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

首先，我有这个:

<div class="row"><div id="盒子">@forelse($duels->结果为 $d)<div class="col-span-4 盒子通知">@include('versus.versus')</div>@空的@endforelse</div><div class="col-span-12"><div class="分页文本中心">{{$duels->链接()}}</div></div>

如我们所见，我有一个 div #boxes ，其中包含 divs .box .分页由 Laravel 设置，如下所示:

<div class="col-span-12"><div class="分页文本中心"><div class="分页"><ul><li class="previous_page disabled"><a href="#">&laquo;上一个</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">下一个 &raquo;</a></li></ul></div></div></div>

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

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

PS:我已经尝试了一些东西，但没有一个像这样:

 $('#boxes').infinitescroll({加载:{完成:未定义，finishedMsg: "<em>恭喜你，你已经走到了互联网的尽头.</em>",味精:空，msgText: "<em>正在加载下一组帖子...</em>",选择器:空，速度:'快'，开始:未定义},状态: {isDuringAjax:假，isInvalidPage:假，isDestroyed:假，isDone: false,//当它一直通过档案时.暂停:假，当前页面:1},调试:假，行为:未定义，binder: $(window),//用于缓存将要滚动的元素的选择器nextSelector: "div.paginate li.active a",navSelector: "div.paginate",contentSelector: null,//重命名为 pageFragmentextraScrollPx: 0,itemSelector: "div.notzy",动画:假，路径解析:未定义，数据类型:'html'，附加回调:真，缓冲像素:40，错误回调:函数(){}，infid: 0,//实例IDpixelFromNavToBottom:未定义，path: undefined,//可以是 URL 部分的数组(例如 ["/page/", "/"])，也可以是接受页码并返回 URL 的函数prefill: false,//当文档小于窗口时，加载数据直到文档变大或链接用完maxPage:undefined//手动控制最大页数(当 maxPage 未定义时，最大页数限制不起作用)});

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

解决方案

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

$('#boxes').infinitescroll({navSelector : ".paginate",nextSelector : ".paginate a:last",itemSelector : ".box",调试:假，数据类型:'html'，路径:函数(索引){返回 "?page=" + 索引;}}，函数(新元素，数据，网址){var $newElems = $( newElements );$('#boxes').masonry('附加', $newElems, true);});

这行得通，因为:

• laravel 4 给出的分页和我们之前看到的一样
• laravel 中的分页会给出一个类似 ....?page=x 的 url

重要

你会遇到的错误是:

当您向下滚动超出最后一页时，您可能会发现您一遍又一遍地进入最后一页，从而导致真正的无限滚动.

要解决这个问题，请转到 paginator.php(在 laravel 文件夹中)并将其更改如下:

if (is_numeric($page) and $page > $last = ceil($total/$per_page)){返回响应::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屋！