Laravel 和无限卷轴

Posted

技术标签:

【中文标题】Laravel 和无限卷轴【英文标题】:Laravel and Infinite Scroll 【发布时间】:2013-05-05 10:50:45 【问题描述】:

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

【问题讨论】:

链接中有一些有用的东西:wern-ancheta.com/blog/2015/03/01/… 【参考方案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 只选择需要的内容,callback 功能隐藏分页内容(我不得不手动隐藏它,因为它们的属性 pagingSelector 似乎对我无效)。您可以在插件的主页上找到模式详细信息。

【讨论】:

这个很棒很轻的一个,感谢分享,但是它不支持在同一页面中的多个滚动,所以对于未来的人来说:D要注意! 这应该是公认的答案,它就像一个魅力! 这个答案已有 4 年历史,但仍然为我节省了数小时的工作时间。太感谢了!同意 Carlos Alvarez 的观点,应该是公认的答案。【参考方案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 的 url

重要

你会遇到的错误是:

当您向下滚动到最后一页之外时,您可能会发现您一遍又一遍地进入最后一页,从而导致真正的无限滚动。

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

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

希望有一天它会对某人有所帮助!

【讨论】:

非常感谢您的回答,但它对我不起作用,这个对我来说已经完成了,它对 Lara 5 来说是更新的 [***.com/questions/33221805/…【参考方案3】:

感谢 Pretty Good Pancake 提供此解决方案,它运行良好。但是我认为在 Laravel 4 中,响应门面不再有 error() 方法,所以像 App::abort('404', '...')Response::make('...', 404) 这样的东西会起作用。只要记住将use Illuminate\Support\Facades\.. 添加到文件中,因为该文件是命名空间的。

我认为更简洁的方法可能是自己扩展 Paginator 类并实现 getCurrentPage 函数。这样,当您执行 php composer.phar update 时更改不会被清除,这可能会覆盖供应商目录中的文件。

【讨论】:

以上是关于Laravel 和无限卷轴的主要内容,如果未能解决你的问题,请参考以下文章

php 使用Laravel和jScroll进行无限滚动分页

laravel54关于用户权限认证RBAC和无限极分类

使用 laravel 和 vue 的无限滚动请求未发送以显示数据

Laravel 5.4 实现无限级分类

Laravel 5 分页 + 无限滚动 jQuery

如何在 Laravel 中声明无限参数?