Laravel 5.4 + jScroll.js не работает

Я пытаюсь реализовать бесконечную прокрутку на основе этот урок.

Не может быть проще, верно? хорошо … это не работает. Это мой код здесь:

В файле маршрута (я не поместил его в контроллер, потому что это был простой тест)

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>

Там нет абсолютно ничего в консоли. Как будто ничего не происходит.

Я что-то упускаю, но не знаю что. Вы видите что-то не так? Спасибо!

Ps. Я тоже поменял contentSelector: '.infinite-scroll' в contentSelector: 'div.infinite-scroll',, Но ничего.

0

Решение

Ваша нумерация страниц за пределами 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>
1

Другие решения

Попробуйте вот так:

<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>
0

По вопросам рекламы [email protected]