使用 Laravel 和 jQuery 实现无限滚动

百变鹏仔 3天前 #JavaScript

文章标签 Laravel

与传统分页相比，无限滚动提供了一种更现代、更流畅的数据加载方式。当用户向下滚动页面时，新数据会自动加载，而不是单击分页链接。

先决条件

第 1 步：设置 laravel 进行分页

首先，设置控制器来处理分页：

// in your usercontrollerpublic function index(request $request){    $users = user::paginate(10); // paginate the results, 10 per page    if ($request-&gt;ajax()) {        return view('users.partials.users_list', compact('users'))-&gt;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' =&gt; $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-&gt;name }}</td>    <td>{{ $user-&gt;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() &gt;= $(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 实现无限滚动

第 1 步：设置 laravel 进行分页

第 2 步：创建视图

第 3 步：实现无限滚动的 jquery

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？