Laravel 5 Paginate + Infinite Scroll jQuery [英] Laravel 5 Paginate + Infinite Scroll jQuery

问题描述

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

I am trying to use paginate() to achieve infinite scroll. I think the easiest way is using the 'infinite-scroll' to achieve this. If you have any other suggestion how to do it without infinite-scroll library, just using jQuery, I'd be happy to know..

我将变量返回到查看如下：

I am returning the variable to view like this:

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

    return view ('show')->with(compact('posts'));
 }

我的观点：

<div id="content" class="col-md-10">
    @foreach (array_chunk($posts->all(), 3) as $row)
        <div class="post row">
            @foreach($row as $post)
                <div class="item col-md-4">
                    <!-- SHOW POST -->
                </div>
            @endforeach
        </div>
    @endforeach
    {!! $posts->render() !!}
 </div>

Javascript Part：

Javascript Part:

$(document).ready(function() {
  (function() {
     var loading_options = {
        finishedMsg: "<div class='end-msg'>End of content!</div>",
        msgText: "<div class='center'>Loading news items...</div>",
        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] 2] 3]>]部分。但是，无限滚动不起作用。我也没有在控制台中出现任何错误。

However, this doesn't work. The ->render() part is working because I am getting [<[1]2]3]>] part. However, the infinite scroll doesn't work. I also don't get any errors in the console.

[< [1] 2] 3]>]在视图中是这样的：source：

[<[1]2]3]>] is like this in the view:source:

<ul class="pagination">
       <li class="disabled"><span>«</span> </li>                    //   «
       <li class="active"><span>1</span></li>                       //   1
       <li><a href="http://test.dev/?page=2">2</a></li>             //   2
       <li><a href="http://test.dev/?page=3">3</a></li>             //   3
       <li><a href="http://test.dev/?page=2" rel="next">»</a></li>  //   »
</ul>

推荐答案

你应该可以使用分页就好了您收到新帖子的电话与页面加载不同。所以你有两个Laravel调用：

You should be able to use the Pagination just fine as long as your call to get new posts is different than page load. So you'd have two Laravel calls:

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

1.) To provide the template of the page (including jQuery, CSS, and your max_page count variable -- view HTML) 2.) For the AJAX to call posts based on the page you give it.

这就是我的无限卷轴工作原理...

This is how I got my infinity scroll to work...

HTML：

<!-- Your code hasn't changed-->
<div id="content" class="col-md-10">
  @foreach (array_chunk($posts->all(), 3) as $row)
    <div class="post row">
        @foreach($row as $post)
            <div class="item col-md-4">
                <!-- SHOW POST -->
            </div>
        @endforeach
    </div>
  @endforeach
  {!! $posts->render() !!}
</div>

<!-- Holds your page information!! -->
<input type="hidden" id="page" value="1" />
<input type="hidden" id="max_page" value="<?php echo $max_page ?>" />

<!-- Your End of page message. Hidden by default -->
<div id="end_of_page" class="center">
    <hr/>
    <span>You've reached the end of the feed.</span>
</div>

在页面加载时，您将填写max_page变量（所以请执行以下操作： ceil（Post :: with（'status'=='Verified'） - > count（）/ 30）; 。

On page load, you will fill in the max_page variable (so do something like this: ceil(Post::with('status' == 'verified')->count() / 30);.

接下来，你的jQuery：

Next, your 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("<div id='loading' class='center'>Loading news items...</div>");
        },
        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 也使用了此代码，因此动画效果非常好。

There ya go! That's all. I was using Masonry with this code also so the animation worked wonderfully.

这篇关于Laravel 5 Paginate + Infinite Scroll jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！