使用 Laravel 和 jQuery 实现无限滚动
与传统分页相比，无限滚动提供了一种更现代、更流畅的数据加载方式。当用户向下滚动页面时，新数据会自动加载，而不是单击分页链接。先决条件laravel 和 jquery 的基础知识。具有分页模型的 laravel 项目（例如，用户）。 第 1 步：设置 laravel 进行分页首先，设置控制器来处理分页：// in your usercontrollerpublic 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 实现无限滚动，可以提供更流畅的用户体验。这种方法消除了分页链接的需要，并在用户滚动时自动加载内容。尽情享受！ 以上就是使用 Laravel 和 jQuery 实现无限滚动的详细内容，更多请关注我的其它相关文章！