Question

我正在使用jscroll自动滚动内容。脚本部分在下面

  <script type="text/javascript">
        $('ul.pagination').hide();
        $(function() {
            $('.infinite-scroll').jscroll({
                refresh: true
                autoTrigger: true,
                loadingHtml: '<img class="center-block" src="/images/loading.gif" alt="Loading..." />',
                padding: 0,
                nextSelector: '.pagination li.active + li a',
                contentSelector: 'div.infinite-scroll',
                callback: function() {
                    $('ul.pagination').remove();
                }
            });
        });
    </script>

现在是我的blade.php

<div class="infinite-scroll">    
   @foreach($questions as $q)
      <div class="panel panel-default pan">
        <div class="panel-heading pin" role="tab" id="heading{{$q->id}}">
           <h4 class="panel-title">
           <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{$q->id}}" aria-expanded="true" aria-controls="collapse{{$q->id}}">
                                        {{ substr($q->question,0,55)}}....                                </a>
            </h4>
          </div>
        <div id="collapse{{$q->id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{$q->id}}">
           <div class="panel-body">
               {{$q->question}}
                <div class="comments-holder" id="ch{{$q->id}}">                                        
                   @foreach($q->comment as $c)
                      <div class="comment-item">
                          <div class="avatar">
                              <i class="fa fa-user"></i>
                          </div>
                          <div class="comments">
                              <h6>{{$c->username}}</h6>
                              <p>{{$c->comment}}</p>
                         </div>
                       </div>
                  @endforeach
               <div class="comment-form">
              @if(Auth::user())
                <form id="{{$q->id}}" class="commentform">
                  {{csrf_field()}}
                  <textarea name ="comment" class="comm_clear" id="comment{{$q->id}}" required placeholder="Type your comments" rows="3"></textarea>
                  <input type="hidden" name="question_id" id="question_id{{$q->id}}" value="{{$q->id}}"/>
                  <button type="button" class="discussion" onclick="submitq(this)">Submit</button>
                   </form>       
                   @endif 
                  </div>
               </div>
             </div>
          </div>
         </div>
        <?php $i=1;?>
        @endforeach
        {{ $questions->links() }}
      </div>

我的控制器代码是

  $questions = Question::where('lesson_id', '=', $lesson->id)->paginate(4);
        foreach ($questions as $q) {
            $q->comment = Comment::join('users', 'users.id', '=', 'comments.user_id')
                ->select('users.name as username', 'comments.comment')
                ->where('question_id', '=', $q->id
                )->get();
        }

我的问题是相同的数据正在无限加载。我已经附上了屏幕截图。如何在没有可用数据时停止加载数据。当我向下滚动时重复相同的内容。

Answer 1

对于我来说，您的代码似乎很复杂，对于愿意提供帮助的任何人来说，可能需要一些时间来理解它，我认为这就是为什么您没有得到任何答复的原因。

我建议先在系统上以较小的组件测试jscroll，并尝试最小化代码以分离Laravel和jscroll

比方说，仅获取表的所有列，并在小视图中显示它们，例如分5行，并在其上实现jscroll。

检查它是否有效，然后逐步插入实际的应用程序逻辑并继续进行测试。

我认为这是通过将其与应用程序的其他部分分开来识别错误的好方法。

Jscroll加载相同的内容

1 个答案: