Laravel 和无限卷轴
Posted
技术标签:
【中文标题】Laravel 和无限卷轴【英文标题】:Laravel and Infinite Scroll 【发布时间】:2013-05-05 10:50:45 【问题描述】:我有一个关于 laravel 分页和无限滚动的问题:
首先,我有这个:
<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>
正如我们所见,我有一个 div #boxes,其中包含 divs .box 。 分页由 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>
所以现在,我想放一个无限滚动而不是分页。 我应该如何使用https://github.com/paulirish/infinite-scroll?
如果您有任何问题,我会留在这里!
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)
);
基于github页面的示例(并替换应该替换的内容),但是这样做绝对没有效果。
【问题讨论】:
链接中有一些有用的东西:wern-ancheta.com/blog/2015/03/01/… 【参考方案1】:还有一种方法可以使用另一个无限滚动插件https://github.com/pklauzinski/jscroll 来实现这一点。
假设你有一个简单的 Blade 视图:
<div class="scroll">
<ol>
@foreach($media as $m)
<li>$m->title</li>
@endforeach
</ol>
$media->links()
</div>
我们可以通过下面的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>
nextSelector 属性会在你的默认 Laravel 分页中选择下一页链接,contentSelector 只选择需要的内容,callback 功能隐藏分页内容(我不得不手动隐藏它,因为它们的属性 pagingSelector 似乎对我无效)。您可以在插件的主页上找到模式详细信息。
【讨论】:
这个很棒很轻的一个,感谢分享,但是它不支持在同一页面中的多个滚动,所以对于未来的人来说:D要注意! 这应该是公认的答案,它就像一个魅力! 这个答案已有 4 年历史,但仍然为我节省了数小时的工作时间。太感谢了!同意 Carlos Alvarez 的观点,应该是公认的答案。【参考方案2】:我已经找到了解决方案(为你,未来的人们):
$('#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);
);
这行得通,因为:
laravel 4 给出的分页和我们之前看到的一样 laravel 中的分页会给出一个类似 ....?page=x 的 url重要
你会遇到的错误是:
当您向下滚动到最后一页之外时,您可能会发现您一遍又一遍地进入最后一页,从而导致真正的无限滚动。
要解决这个问题,请转到 paginator.php(在 laravel 文件夹中)并将其更改如下:
if (is_numeric($page) and $page > $last = ceil($total / $per_page))
return Response::error('404');
希望有一天它会对某人有所帮助!
【讨论】:
非常感谢您的回答,但它对我不起作用,这个对我来说已经完成了,它对 Lara 5 来说是更新的 [***.com/questions/33221805/…【参考方案3】:感谢 Pretty Good Pancake 提供此解决方案,它运行良好。但是我认为在 Laravel 4 中,响应门面不再有 error() 方法,所以像 App::abort('404', '...')
或 Response::make('...', 404)
这样的东西会起作用。只要记住将use Illuminate\Support\Facades\..
添加到文件中,因为该文件是命名空间的。
我认为更简洁的方法可能是自己扩展 Paginator 类并实现 getCurrentPage 函数。这样,当您执行 php composer.phar update
时更改不会被清除,这可能会覆盖供应商目录中的文件。
【讨论】:
以上是关于Laravel 和无限卷轴的主要内容,如果未能解决你的问题,请参考以下文章