[英]Laravel 5.4 + jScroll.js not working
I'm trying to implement an infinite scrolling based on this tutorial .我正在尝试根据本教程实现无限滚动。
Couldn't be simpler, right?不能更简单,对吧? well... It's not working.
嗯...它不工作。 This is my code here:
这是我的代码:
In the route file (I didn't put it in a controller because was a simple test)在路由文件中(我没有把它放在控制器中,因为是一个简单的测试)
Route::get('/', function(){
$articles = \App\Article::paginate(1);
return view('home')->with('articles', $articles);
});
In home.blade.php在 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() }}
At the bottom of that same file在同一个文件的底部
<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>
There's absolutely nothing in the console.控制台中绝对没有任何内容。 Like nothing is happening.
就像什么都没有发生一样。
I'm missing something, but I don't know what.我错过了一些东西,但我不知道是什么。 Do you see something wrong?
你看有什么不对吗? Thanks!
谢谢!
Ps.附言。 I also changed
contentSelector: '.infinite-scroll'
to contentSelector: 'div.infinite-scroll',
.我还将
contentSelector: '.infinite-scroll'
更改为contentSelector: 'div.infinite-scroll',
。 But nothing.但没什么。
Your pagination is outside the infinite-scroll
.您的分页在
infinite-scroll
。
Try试试
<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>
Try like this:像这样尝试:
<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.