Laravel使用Jquery和AJAX在滚动中加载更多数据

Question

这是我的代码在这里

<script>
  $(document).ready(function(){

    $(window).scroll(fetchPosts);

    function fetchPosts(){

      var page = $('.endless-pagination').data('next-page');

      if(page !== null){

        clearTimeout($.data(this, "scrollCheck"));

        $.data(this, "scrollCheck", setTimeout(function(){

          var scroll_position_for_post_load = $(window).height() + $(window).scrollTop + 100;

          if(scroll_position_for_post_load >= $(document).height(){

            $.get(page, function(data){

              $('.posts').append(data.posts);


              $('.endless-pagination').data('next-page', data.next_page);

            });

          }

        }, 350))

      }

    }

  });
</script>

我替换了IF条件

scroll_position_for_post_load >= $(document)height()

与

1 == 1

这可行，但是页面不断加载而无需用户滚动。

这是我的PagesController Variable页面中的代码在顶部声明

public function index(Request $request){

    $posts = Post::orderBy('created_at', 'desc')->paginate($this->paginate_posts);

    if ($request->ajax()) {

        return [
            'posts' => view('pages.ajax.index')->with(compact('posts'))->render(),
            'next_page' => $posts->nextPageUrl()
        ];

    }

    return view('pages.index')->with(compact('posts'));

}

在我的index.blade.php页面上

    @forelse ($posts as $post)

    {{--  Post and replies attached  --}}
    <div class="media stream">
        <a href="{{route('profile')}}" class="media-avatar medium pull-left">
            <img src="{{asset('images/user.png')}}">
        </a>
        <div class="media-body">
            <div class="stream-headline">
                <h5 class="stream-author">
                    <a href="http://localhost/blog/public/question/{{$post->slug}}" class="center">{{ $post->title }}</a>
                </h5>

                <h5 class="stream-author">
                    <a href="{{route('profile')}}" style="text-decoration:none;color:initial">{{ $post->user->name }}</a>
                    <small> {{ date('F d, Y', strtotime($post->created_at)) }} at {{ date('h:i A', strtotime($post->created_at)) }} </small>
                </h5>

                <div class="stream-text">
                    {{ $post->body }}
                </div>
            </div><!--/.stream-headline-->

            <div class="stream-options">
                <a href="#" class="btn btn-small">
                    <i class="icon-thumbs-up shaded"></i>
                    Like
                </a>
                <a href="http://localhost/blog/public/question/{{$post->slug}}" class="btn btn-small">
                    <i class="icon-reply shaded"></i>
                    Reply
                </a>
                <a href="#" class="btn btn-small">
                    <i class="icon-retweet shaded"></i>
                    Repost
                </a>
                <span class="stream"> {{$post->replies->count()}} comment (s) </span>
            </div>
        </div>{{--  media body  --}}
    </div><!--/.media .stream-->

@empty

    <div class="media stream">
        <div class="media-body">
            <div class="stream-headline">
                <div class="stream-text">
                    All clean. No posts found!!
                </div>
            </div><!--/.stream-headline-->
        </div>
    </div><!--/.media .stream-->

@endforelse

在pages.ajax.index我有

    @forelse ($posts as $post)

    {{--  Post and replies attached  --}}
    <div class="media stream">
        <a href="{{route('profile')}}" class="media-avatar medium pull-left">
            <img src="{{asset('images/user.png')}}">
        </a>
        <div class="media-body">
            <div class="stream-headline">
                <h5 class="stream-author">
                    <a href="http://localhost/blog/public/question/{{$post->slug}}" class="center">{{ $post->title }}</a>
                </h5>

                <h5 class="stream-author">
                    <a href="{{route('profile')}}" style="text-decoration:none;color:initial">{{ $post->user->name }}</a>
                    <small> {{ date('F d, Y', strtotime($post->created_at)) }} at {{ date('h:i A', strtotime($post->created_at)) }} </small>
                </h5>

                <div class="stream-text">
                    {{ $post->body }}
                </div>
            </div><!--/.stream-headline-->

            <div class="stream-options">
                <a href="#" class="btn btn-small">
                    <i class="icon-thumbs-up shaded"></i>
                    Like
                </a>
                <a href="http://localhost/blog/public/question/{{$post->slug}}" class="btn btn-small">
                    <i class="icon-reply shaded"></i>
                    Reply
                </a>
                <a href="#" class="btn btn-small">
                    <i class="icon-retweet shaded"></i>
                    Repost
                </a>
                <span class="stream"> {{$post->replies->count()}} comment (s) </span>
            </div>
        </div>{{--  media body  --}}
    </div><!--/.media .stream-->

@empty

    <div class="media stream">
        <div class="media-body">
            <div class="stream-headline">
                <div class="stream-text">
                    All clean. No posts found!!
                </div>
            </div><!--/.stream-headline-->
        </div>
    </div><!--/.media .stream-->

@endforelse

我看不到的代码有错误吗？

Answer 1

虽然我必须使用JavaScript的alert方法来打印$（window）.height（），$（document）.height（）和$（window）.scrollTop（）的值，但在代码中找到了该错误。

那是当我发现我错过了$（window）.scrollTop之后的括号。

正确的代码是->

var scroll_position_for_post_load = $(window).height() + $(window).scrollTop() + 100;

if(scroll_position_for_post_load >= $(document).height(){
    // rest of code goes here
}