Laravel 和无限滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16487576/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Laravel and Infinite Scroll
提问by Pretty Good Pancake
I have a question about laravel pagination and infinite scroll :
我有一个关于 Laravel 分页和无限滚动的问题：
First of all, I have this :
首先，我有这个：
<div class="row">
<div id="boxes">
@forelse($duels->results as $d)
<div class="col-span-4 box notizy">
@include('versus.versus')
</div>
@empty
@endforelse
</div>
<div class="col-span-12">
<div class="paginate text-center">
{{$duels->links()}}
</div>
</div>
As we can see, I have a div #boxes which contain divs .box . The pagination is set by Laravel and looks like this :
正如我们所看到的，我有一个包含 divs .box 的 div #boxes 。分页由 Laravel 设置，如下所示：
<div class="col-span-12">
<div class="paginate text-center">
<div class="pagination">
<ul>
<li class="previous_page disabled"><a href="#">« Previous</a></li>
<li class="active"><a href="#">1</a></li> <li><a href="index.php?page=2">2</a></li>
<li class="next_page"><a href="index.php?page=2">Next »</a></li>
</ul>
</div>
</div>
</div>
So now, I want to put an infinite scroll instead of a pagination. How should I do using https://github.com/paulirish/infinite-scroll?
所以现在，我想放置一个无限滚动而不是分页。我应该如何使用https://github.com/paulirish/infinite-scroll？
I stay here if you have questions !
如果你有问题，我留在这里！
PS : I've tried a few things but none worked like :
PS：我尝试了一些东西，但没有一个像：
$('#boxes').infinitescroll({
loading: {
finished: undefined,
finishedMsg: "<em>Congratulations, you've reached the end of the internet.</em>",
msg: null,
msgText: "<em>Loading the next set of posts...</em>",
selector: null,
speed: 'fast',
start: undefined
},
state: {
isDuringAjax: false,
isInvalidPage: false,
isDestroyed: false,
isDone: false, // For when it goes all the way through the archive.
isPaused: false,
currPage: 1
},
debug: false,
behavior: undefined,
binder: $(window), // used to cache the selector for the element that will be scrolling
nextSelector: "div.paginate li.active a",
navSelector: "div.paginate",
contentSelector: null, // rename to pageFragment
extraScrollPx: 0,
itemSelector: "div.notizy",
animate: false,
pathParse: undefined,
dataType: 'html',
appendCallback: true,
bufferPx: 40,
errorCallback: function () { },
infid: 0, //Instance ID
pixelsFromNavToBottom: undefined,
path: undefined, // Can either be an array of URL parts (e.g. ["/page/", "/"]) or a function that accepts the page number and returns a URL
prefill: false, // When the document is smaller than the window, load data until the document is larger or links are exhausted
maxPage:undefined // to manually control maximum page (when maxPage is undefined, maximum page limitation is not work)
});
Based on the example of the github page (and replacing what should be replace), but there's absolutely no effect doing so.
基于github页面的示例（并替换应该替换的内容），但这样做绝对没有效果。
回答by zloynemec
There is also a way to implement this with another infinite scroll plugin https://github.com/pklauzinski/jscroll.
还有一种方法可以使用另一个无限滚动插件https://github.com/pklauzinski/jscroll来实现。
Assuming you have a simple Blade view:
假设您有一个简单的 Blade 视图：
<div class="scroll">
<ol>
@foreach($media as $m)
<li>{{$m->title}}</li>
@endforeach
</ol>
{{$media->links()}}
</div>
We can achieve infinite scroll with the following JS-code
我们可以使用以下 JS 代码实现无限滚动
<?=HTML::script('<YOUR PATH HERE>jquery.jscroll/jquery.jscroll.min.js');?>
<script type="text/javascript">
$(function() {
$('.scroll').jscroll({
autoTrigger: true,
nextSelector: '.pagination li.active + li a',
contentSelector: 'div.scroll',
callback: function() {
$('ul.pagination:visible:first').hide();
}
});
});
</script>
The nextSelectorproperty will select the next page link in your default Laravel paging, contentSelectorselects only required content, and the callbackfunction hides paging content (I had to manually hide it because their attribute pagingSelectorseems to be invalid for me). You can find mode details on plugin's home page.
该nextSelector属性将选择默认的Laravel分页，下一个页面链接contentSelector只选择所需内容，而回调函数隐藏分页内容（我不得不手动将其隐藏，因为他们的属性pagingSelector似乎无效，对我来说）。您可以在插件主页上找到模式详细信息。
回答by Pretty Good Pancake
I've found the solution (for you, people of the future) :
我找到了解决方案（为您，未来的人们）：
$('#boxes').infinitescroll({
navSelector : ".paginate",
nextSelector : ".paginate a:last",
itemSelector : ".box",
debug : false,
dataType : 'html',
path: function(index) {
return "?page=" + index;
}
}, function(newElements, data, url){
var $newElems = $( newElements );
$('#boxes').masonry( 'appended', $newElems, true);
});
This works because :
这是有效的，因为：
- The pagination given by laravel 4 is like we saw before
- The pagination in laravel give an url like ....?page=x
- laravel 4 给出的分页就像我们之前看到的
- laravel 中的分页给出了一个类似 ....?page=x 的 url
IMPORTANT
重要的
The bug you will encounter is :
您将遇到的错误是：
When you scroll down beyond what should be the last page, you'll probably find that you keep getting the last page over and and over again, causing genuinely infinite scrolling.
当您向下滚动超出应该是最后一页的内容时，您可能会发现自己一遍又一遍地看到最后一页，从而导致真正的无限滚动。
to fix this, go to the paginator.php (in the laravel folder) and change it as follow :
要解决此问题，请转到 paginator.php（在 Laravel 文件夹中）并将其更改如下：
if (is_numeric($page) and $page > $last = ceil($total / $per_page))
{
return Response::error('404');
}
Hope it will help someone someday !
希望有一天它会帮助某人！
回答by jct
Thanks Pretty Good Pancake for this solution, it works well. However I think in Laravel 4, the Response Facade no longer has an error() method, so something like App::abort('404', '...')or Response::make('...', 404)would work. Just remember to add the use Illuminate\Support\Facades\..to the file since the file is namespaced.
感谢 Pretty Good Pancake 提供此解决方案，效果很好。但是我认为在 Laravel 4 中，Response Facade 不再有 error() 方法，所以类似App::abort('404', '...')or 的东西Response::make('...', 404)会起作用。只需记住将use Illuminate\Support\Facades\..加到文件中，因为文件是命名空间的。
I think a cleaner way to do this is probably to extend the Paginator class yourself and implement the getCurrentPage function. That way the changes won't get wiped out when you do a php composer.phar updatewhich may overwrite the files in the vendor directory.
我认为更简洁的方法可能是自己扩展 Paginator 类并实现 getCurrentPage 函数。这样，当您执行php composer.phar update可能会覆盖供应商目录中的文件时，更改不会被清除。
