我正在尝试使用paginate()
实现无限滚动。我认为最简单的方法是使用“无限滚动”来实现这一点。如果您有任何其他建议如何在没有无限滚动库的情况下仅使用 jQuery 做到这一点,我很高兴知道。
我正在返回变量来查看,如下所示:
public function index()
{
$posts = Post::with('status' == 'verified')
->paginate(30);
return view ('show')->with(compact('posts'));
}
My View:
<div id="content" class="col-md-10">
@foreach (array_chunk($posts->all(), 3) as $row)
<div class="post row">
@foreach($row as $post)
<div class="item col-md-4">
<!-- SHOW POST -->
</div>
@endforeach
</div>
@endforeach
{!! $posts->render() !!}
</div>
JavaScript 部分:
$(document).ready(function() {
(function() {
var loading_options = {
finishedMsg: "<div class='end-msg'>End of content!</div>",
msgText: "<div class='center'>Loading news items...</div>",
img: "/assets/img/ajax-loader.gif"
};
$('#content').infinitescroll({
loading: loading_options,
navSelector: "ul.pagination",
nextSelector: "ul.pagination li:last a", // is this where it's failing?
itemSelector: "#content div.item"
});
});
});
然而,这不起作用。 ->render() 部分正在工作,因为我得到了 [] 部分。但是,无限滚动不起作用。我在控制台中也没有收到任何错误。
[] 在视图中是这样的:来源:
<ul class="pagination">
<li class="disabled"><span>«</span> </li> // «
<li class="active"><span>1</span></li> // 1
<li><a href="http://test.dev/?page=2">2</a></li> // 2
<li><a href="http://test.dev/?page=3">3</a></li> // 3
<li><a href="http://test.dev/?page=2" rel="next">»</a></li> // »
</ul>