php 使用Laravel和jScroll进行无限滚动分页
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了php 使用Laravel和jScroll进行无限滚动分页相关的知识，希望对你有一定的参考价值。
{{-- For more details see: http://laraget.com/blog/implementing-infinite-scroll-pagination-using-laravel-and-jscroll --}}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Laravel and jScroll - Infinite Scrolling</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="page-header">Comments</h1>
@if (count($comments) > 0)
<div class="infinite-scroll">
@foreach($comments as $comment)
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" width="64" height="64" src="/images/avatar.png" alt="">
{{-- MAKE SURE THAT YOU PUT THE CORRECT IMG PATH FOR AVATARS --}}
</a>
<div class="media-body">
<h4 class="media-heading">{{ $comment->author_name }}
<small>{{ $comment->created_at->diffForHumans() }}</small>
</h4>
{{ $comment->body }}
<br>
<span class="pull-right">
<i id="like1" class="glyphicon glyphicon-thumbs-up" style="color: #1abc9c; cursor: pointer;"></i>
{{ rand(0, 200) }}
<i id="dislike1" class="glyphicon glyphicon-thumbs-down" style="color: #e74c3c; cursor: pointer;"></i>
{{ rand(0, 50) }}
</span>
</div>
</div>
<hr>
@endforeach
{{ $comments->links() }}
</div>
@endif
</div>
<div class="col-md-12 text-center">
<small><a href="http://laraget.com" class="text-muted">Filip Zdravkovic - Laraget.com</a></small>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="/js/jquery.jscroll.min.js"></script>
{{-- MAKE SURE THAT YOU PUT THE CORRECT PATH FOR jquery.jscroll.min.js --}}
<script type="text/javascript">
$('ul.pagination').hide();
$(function() {
$('.infinite-scroll').jscroll({
autoTrigger: true,
loadingHtml: '<img class="center-block" src="/images/loading.gif" alt="Loading..." />', // MAKE SURE THAT YOU PUT THE CORRECT IMG PATH
padding: 0,
nextSelector: '.pagination li.active + li a',
contentSelector: 'div.infinite-scroll',
callback: function() {
$('ul.pagination').remove();
}
});
});
</script>
</body>
</html>
{{-- For more details see: http://laraget.com/blog/implementing-infinite-scroll-pagination-using-laravel-and-jscroll --}}<?php
// For more details see: http://laraget.com/blog/implementing-infinite-scroll-pagination-using-laravel-and-jscroll
namespace App\Http\Controllers\InfiniteScrolling;
use App\Comment;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
class CommentController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
*/
public function index()
{
$comments = Comment::latest()->paginate(7);
return view('comments.index', compact('comments'));
}
}
// For more details see: http://laraget.com/blog/implementing-infinite-scroll-pagination-using-laravel-and-jscroll以上是关于php 使用Laravel和jScroll进行无限滚动分页的主要内容，如果未能解决你的问题，请参考以下文章
在 laravel 中对数据数组进行分页并在 vuejs 中使用无限滚动的最佳方法