Infinite Scroll jQuery和Laravel 5 Paginate

我成功地从Controller返回数据

public function index() { $posts = Post::with('status' == 'verified) ->paginate(30); return view ('show')->with(compact('posts')); } 

此外，我在我的视图中成功显示了所有内容：

  
 @foreach (array_chunk($posts->all(), 3) as $row) 
 @foreach($row as $post) 
  
 @endforeach 
 @endforeach {!! $posts->render() !!}  

到目前为止，一切都很顺利。

但是，我根本没有得到官方文件。 什么是’ div.navigation ‘和’ #content div.post ‘？ 我的情况应该是什么？

来自文档的片段：

 $('#content').infinitescroll({ navSelector : "div.navigation", // selector for the paged navigation (it will be ?>hidden) nextSelector : "div.navigation a:first", // selector for the NEXT link (to page 2) itemSelector : "#content div.post" // selector for all items you'll retrieve }); 

编辑：我的Javascript到目前为止

 $(document).ready(function() { (function() { var loading_options = { finishedMsg: "
Congratulations! You've reached the end of the internet
", msgText: "
Loading news items...
", img: "/assets/img/ajax-loader.gif" }; $('#content').infinitescroll({ loading: loading_options, navSelector: "ul.pagination", nextSelector: "ul.navigation a:first", itemSelector: "#content div.item" }); }); }); 

[]部分创建在页面底部，但无限滚动不起作用。 此外，我在控制台中没有记录或错误。

Answer 1

首先，你需要在关闭#content div之后添加这样的分页：

 {!! $posts->render() !!} 

这将输出如下内容：

 
... 

要覆盖分页演示者，请在SO上查看此答案 。

然后您的配置如下所示：

 $(document).ready(function() { var loading_options = { finishedMsg: "
Congratulations! You've reached the end of the internet
", msgText: "
Loading news items...
", img: "/assets/img/ajax-loader.gif" }; $('#content').infinitescroll({ loading: loading_options, navSelector: "ul.pagination", nextSelector: "ul.pagination a:first", itemSelector: "#content div.item" }); }); 

基本上，无限卷轴会为您调用分页链接，因此需要知道所有内容的位置以便将它们组合在一起。