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中的代码变量页面在顶部

声明

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（）的值。

那时我发现我在$（窗口）.scrollTop之后错过了括号。

更正后的代码是＆gt;

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

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

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

1 个答案: