Laravel和无限滚动

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 #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：我已经尝试了一些东西，但没有工作，如：基于GitHub的页面的例子

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

（和更换什么应该被替换），但绝对没有影响这么做。

Answer 1

我已经找到了解决方案（为你，未来的人）：

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

希望这将帮助别人一天！

Answer 2

感谢这个解决方案的不错的煎饼，它运作良好。不过，我认为在Laravel 4中，响应门面不再有错误（）方法，因此类似于App::abort('404', '...')或Response::make('...', 404)可以工作。由于该文件是命名空间的，因此请记得将use Illuminate\Support\Facades\..添加到文件中。

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

Answer 3

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

假设你有一个简单的刀片观点：

<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似乎对我无效）。你可以在插件的主页上找到模式细节。