Twitterなどでよく実装されている、下にいくと無限にデータが読み込まれるアレ。
今回はLaravelとjScrollというjQueryのプラグインを使ってやってみました。
環境
- Laravel 5.2(Blade利用)
- jQuery 1.12.4
- jScroll 2.3.9
コーディング
Controller
ScrollController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use App\Post;
class PostController extends Controller
{
public function scroll()
{
$post_list = Post::orderBy('post_no')->paginate(15);
return view('scroll', compact('post_list'));
}
}
View
ここでのミソは{{$post_list->links()}}を$('#infinite-scroll')の中にしっかり入れておかないと動作しないということ！
これをミスって1時間くらいドツボにハマったのでご注意を。。。
また、検索機能なんかをつけている場合、
{{$post_list->appends(['hoge' => $hoge])->links()}}
とすれば検索結果を引き継ぐことができます。
scrollView.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">
<title>LaravelとjScrollで、Infinite Scrollをやってみた</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
</head>
<body>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.3.9/jquery.jscroll.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul.pagination').hide();
$('#infinite-scroll').jscroll({
autoTrigger: true,
loadingHtml: '<div class="col-xs-12 text-center"><i class="zmdi zmdi-spinner zmdi-hc-spin zmdi-hc-3x"></i></div>',
padding: 0,
nextSelector: '.pagination li.active + li a',
contentSelector: '#infinite-scroll',
callback: function() {
$('ul.pagination').remove();
}
});
});
</script>
<div class="container">
<div id="infinite-scroll">
<ul>
@forelse ($post_list as $post)
<li>
<b>[{{$post->title}}]</b>
<br>
{{$post->content}}
</li>
@empty
<li>投稿はまだありません。</li>
@endforelse
</ul>
{{$post_list->links()}}
</div>
</div>
</body>
</html>
所感
自分で仕込もうとすると、ちょっとめんどうな処理ですが、プラグインでここまでサクッと出来るとは思いませんでした。
コントローラーなんて2行で済んでますし、めちゃめちゃ簡単ですね。。。
日本語のリファレンスが意外と見つからなかったので、今回書いてみました！