Laravel 5.4 + jScroll.js 不工作答案

【问题标题】：Laravel 5.4 + jScroll.js not workingLaravel 5.4 + jScroll.js 不工作
【发布时间】：2017-05-22 19:47:56
【问题描述】：

我正在尝试基于this tutorial 实现无限滚动。

再简单不过了，对吧？嗯......它不工作。这是我的代码：

在路由文件中（我没有把它放在控制器中，因为是一个简单的测试）

Route::get('/', function(){

$articles = \App\Article::paginate(1);

return view('home')->with('articles', $articles);

});

在 home.blade.php 中

<div class="infinite-scroll">
@foreach($articles as $article)
    <article class="post">
        <header>
            <div class="title">
                <h2>{{ $article->title }}</h2>
            </div>
        </header>
    </article>
@endforeach
</div>

{{ $articles->links() }}

在同一个文件的底部

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.3.7/jquery.jscroll.min.js"></script>
<script type="text/javascript">
    $('ul.pagination').hide();
    $(function() {
        $('.infinite-scroll').jscroll({
            autoTrigger: true,
            debug: true,
            loadingHtml: '<img class="center-block" src="/images/loading.gif" alt="Loading..." />',
            padding: 0,
            nextSelector: '.pagination li.active + li a',
            contentSelector: '.infinite-scroll',
            callback: function() {
                $('ul.pagination').remove();
            }
        });
    });
</script>

控制台中绝对没有任何内容。就像什么都没发生一样。

我错过了一些东西，但我不知道是什么。你看出什么不对了吗？谢谢！

附言。我还将contentSelector: '.infinite-scroll' 更改为contentSelector: 'div.infinite-scroll',。但什么都没有。

【问题讨论】：

如果去掉 contentSelector ，代码是否返回了下一页内容？？

标签： php jquery laravel jquery-jscroll

【解决方案1】：

你的分页在infinite-scroll之外。

试试

<div class="infinite-scroll">
@foreach($articles as $article)
    <article class="post">
        <header>
            <div class="title">
                <h2>{{ $article->title }}</h2>
            </div>
        </header>
    </article>
@endforeach
{{ $articles->links() }}
</div>

【讨论】：

它还活着！谢了哥们！现在很明显了。

【解决方案2】：

试试这样：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.3.7/jquery.jscroll.min.js"></script>
<script type="text/javascript">
    $('ul.pagination').hide();
    $(function() {
        $('document').ready(function(){
         $('.infinite-scroll').jscroll({
            autoTrigger: true,
            debug: true,
            loadingHtml: '<img class="center-block" src="/images/loading.gif" alt="Loading..." />',
            padding: 0,
            nextSelector: '.pagination li.active + li a',
            contentSelector: '.infinite-scroll',
            callback: function() {
                $('ul.pagination').remove();
            }
         });


        });   
    });
</script>

【讨论】：