使用 Laravel 和 jQuery 实现无限滚动

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

先决条件

• 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')

    @include('users.partials.users_list', ['users' => $users])


    
loading more users...

							

								
								

									Shoping购物网源码
									
该系统采用多层模式开发，这个网站主要展示女装的经营，更易于网站的扩展和后期的维护，同时也根据常用的SQL注入手段做出相应的防御以提高网站的安全性，本网站实现了购物车,产品订单管理，产品展示，等等，后台实现了动态权限的管理，客户管理，订单管理以及商品管理等等，前台页面设计精致，后台便于操作等。实现了无限子类的添加，实现了动态权限的管理，支持一下一个人做的辛苦
								
								下载 
							
						

@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 实现无限滚动，可以提供更流畅的用户体验。这种方法消除了分页链接的需要，并在用户滚动时自动加载内容。

尽情享受！