[英]jScroll.js with Laravel 5: nextSelector not found - destroying
[英]Laravel 5.4 + jScroll.js not working
我正在嘗試根據本教程實現無限滾動。
不能更簡單,對吧? 嗯...它不工作。 這是我的代碼:
在路由文件中(我沒有把它放在控制器中,因為是一個簡單的測試)
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',
。 但沒什么。
您的分頁在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>
像這樣嘗試:
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.