与传统分页相比，无限滚动提供了一种更现代、更流畅的数据加载方式。当用户向下滚动页面时，新数据会自动加载，而不是单击分页链接。
先决条件
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') @include('users.partials.users_list', ['users' => $users]) loading more users...
@endsection
登录后复制
资源/视图/用户/partials/users_list.blade.php
@foreach($users as $user) {{ $user->name }} {{ $user->email }}@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')@endsection`
登录后复制
通过使用 laravel 和 jquery 实现无限滚动，可以提供更流畅的用户体验。这种方法消除了分页链接的需要，并在用户滚动时自动加载内容。
尽情享受！
以上就是使用 Laravel 和 jQuery 实现无限滚动的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2670352.html
