Laravel과 jScroll에서 Infinite Scroll을 시도했습니다.
10098 단어 PHP아약스라라벨jQueryinfinitescroll
이번에는 Laravel과 jScroll이라는 jQuery 플러그인을 사용해 보았습니다.
환경
코딩
컨트롤러
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'));
}
}
보기
여기서 미소는 {{$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 줄로 끝나고 엄청 간단하네요. . .
일본어의 레퍼런스가 의외로 발견되지 않았으므로, 이번에 써 보았습니다!
참고문헌
<?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'));
}
}
<!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 줄로 끝나고 엄청 간단하네요. . .
일본어의 레퍼런스가 의외로 발견되지 않았으므로, 이번에 써 보았습니다!
참고문헌
Reference
이 문제에 관하여(Laravel과 jScroll에서 Infinite Scroll을 시도했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/daiki44/items/16ece4c9be9f41bf78cb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
