Laravel 5 Paginate + Infinite Scroll jQuery

我试图使用paginate()来实现无限滚动。 我认为最简单的方法是使用’无限滚动’来实现这一目标。 如果你有任何其他的建议怎么做没有无限滚动库，只使用jQuery，我很高兴知道..

我返回变量来查看如下：

 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() !!}  

Javascript部分：

 $(document).ready(function() { (function() { var loading_options = { finishedMsg: "
End of content!
", msgText: "
Loading news items...
", img: "/assets/img/ajax-loader.gif" }; $('#content').infinitescroll({ loading: loading_options, navSelector: "ul.pagination", nextSelector: "ul.pagination li:last a", // is this where it's failing? itemSelector: "#content div.item" }); }); }); 

但是，这不起作用。 – > render（）部分正在工作，因为我得到[]部分。 但是，无限滚动不起作用。 我也没有在控制台中出现任何错误。

[]在视图中是这样的：来源：

 
 
« 
 // « 
1
 // 1 
2
 // 2 
3
 // 3 
»
 // »  

Answer 1

只要您收到新post的电话与页面加载不同，您就应该可以使用分页。 所以你有两个Laravel电话：

1.）提供页面模板（包括jQuery，CSS和你的max_page计数变量 – 查看HTML）2。）让AJAX根据你提供的页面调用post。

这就是我让我的无限卷轴工作的方式……

HTML：

  
 @foreach (array_chunk($posts->all(), 3) as $row) 
 @foreach($row as $post) 
  
 @endforeach 
 @endforeach {!! $posts->render() !!} 
     
 
 You've reached the end of the feed.  

在页面加载时，你将填写max_page变量（所以做这样的事情： ceil(Post::with('status' == 'verified')->count() / 30); ;.

接下来，你的jQuery：

 var outerPane = $('#content'), didScroll = false; $(window).scroll(function() { //watches scroll of the window didScroll = true; }); //Sets an interval so your window.scroll event doesn't fire constantly. This waits for the user to stop scrolling for not even a second and then fires the pageCountUpdate function (and then the getPost function) setInterval(function() { if (didScroll){ didScroll = false; if(($(document).height()-$(window).height())-$(window).scrollTop() < 10){ pageCountUpdate(); } } }, 250); //This function runs when user scrolls. It will call the new posts if the max_page isn't met and will fade in/fade out the end of page message function pageCountUpdate(){ var page = parseInt($('#page').val()); var max_page = parseInt($('#max_page').val()); if(page < max_page){ $('#page').val(page+1); getPosts(); $('#end_of_page').hide(); } else { $('#end_of_page').fadeIn(); } } //Ajax call to get your new posts function getPosts(){ $.ajax({ type: "POST", url: "/load", // whatever your URL is data: { page: page }, beforeSend: function(){ //This is your loading message ADD AN ID $('#content').append("
Loading news items...
"); }, complete: function(){ //remove the loading message $('#loading').remove }, success: function(html) { // success! YAY!! Add HTML to content container $('#content').append(html); } }); } //end of getPosts function 

你去！ 就这样。 我正在使用Masonry这个代码，所以动画效果非常好。

Answer 2

本教程简单而有用 – http://laraget.com/blog/implementing-infinite-scroll-pagination-using-laravel-and-jscroll

最终的脚本看起来像这个

 {!! HTML::script('assets/js/jscroll.js') !!}  

你只需要使用laravel的分页

 {!! $restaurants->links() !!}