與傳統分頁相比，無限滾動提供了一種更現代、更流暢的數據加載方式。當用戶向下滾動頁面時，新數據會自動加載，而不是單擊分頁鏈接。
先決條件
laravel 和 jquery 的基礎知識。
具有分頁模型的 laravel 項目（例如，用戶）。
第 1 步：設置 laravel 進行分頁
首先，設置控制器來處理分頁：
// in your usercontroller
public function index(request $request)
{
$users = user::paginate(10); // paginate the results, 10 per page
if ($request->ajax()) {
return view('users.partials.users_list', compact('users'))->render();
}
return view('users.index', compact('users'));
}
登錄后復制
第 2 步：創建視圖
創建視圖來顯示分頁數據：
資源/視圖/用戶/index.blade.php
@extends('layouts.app')
@section('content')
<div id="user-list">
@include('users.partials.users_list', ['users' => $users])
</div>
<div id="loading" style="text-align:center; display:none;">
<p>loading more users...</p>
</div>
@endsection
登錄后復制
資源/視圖/用戶/partials/users_list.blade.php
@foreach($users as $user)
<tr>
<td>{{ $user->name }}</td>
<td>{{ $user->email }}</td>
</tr>
@endforeach
登錄后復制
第 3 步：實現無限滾動的 jquery
現在，修改你的 jquery 腳本以支持無限滾動：
public/js/infinite-scroll.js
$(document).ready(function() {
let page = 1;
$(window).scroll(function() {
if ($(window).scrolltop() + $(window).height() >= $(document).height() - 100) {
page++;
loadmoredata(page);
}
});
function loadmoredata(page) {
$.ajax({
url: '?page=' + page,
method: 'get',
beforesend: function() {
$('#loading').show();
},
success: function(data) {
if (data.trim() === "") {
return;
}
$('#loading').hide();
$('#user-list').append(data);
},
error: function(xhr) {
console.log(xhr.responsetext);
}
});
}
});
登錄后復制
將此腳本包含在您的主視圖中：
@section('scripts')
<script src="%7B%7B%20asset('js/infinite-scroll.js')%20%7D%7D"></script>
@endsection`
登錄后復制
通過使用 laravel 和 jquery 實現無限滾動，可以提供更流暢的用戶體驗。這種方法消除了分頁鏈接的需要，并在用戶滾動時自動加載內容。
盡情享受！
