使用 Laravel、Inertiajs v 和 Vue 3 实现无限滚动

在这篇综合指南中，我们将探索如何使用 inertia.js v2.0 和 vue 3 在 laravel 应用程序中实现无限滚动。我们将介绍前端和后端实现，特别注意处理整页刷新并保持滚动位置。

目录

• 了解组件
• 前端实现
• 后端实现
• 现实示例：带有类别的博客文章
• 最佳实践和注意事项

了解组件

无限滚动的实现依赖于三个主要组件：

1. inertia.js v2.0 的 whenvisible 组件：该组件处理交叉观察者逻辑以检测何时需要加载更多内容。
2. laravel 的分页：处理服务器端分页逻辑。
3. vue 3 的 composition api：管理我们的前端状态和反应性。

前端实施

让我们从一个为博客文章列表实现无限滚动的 vue 组件开始：

主要前端功能

1. whenvisible 组件：当元素在视口中可见时，inertia.js v2.0 中的此组件会自动触发请求。

2. 分页参数:
   

:params="{
    data: {
        page: page.props.postspagination.current_page + 1,
    },
    only: ['posts', 'postspagination'],
}"

• data：指定要加载的下一页
• only：通过仅获取所需数据来优化请求

1. 加载状态：组件优雅地处理加载和内容结束状态。

后端实施

这是处理常规分页和整页加载场景的 laravel 控制器实现：

ChatGPT Website Builder

ChatGPT网站生成器，AI对话快速生成网站

下载

 $category,
            'featuredpost' => $this->getfeaturedpost(),
            'posts' => $this->getpaginatedposts($category),
            'postspagination' => $this->getpaginatedposts($category)?->toarray(),
        ]);
    }

    protected function getpaginatedposts(?category $category): ?lengthawarepaginator
    {
        $currentpage = request()->input('page', 1);
        $perpage = request()->input('per_page', 12);

        $query = post::query()
            ->with(['author', 'category'])
            ->published();

        if ($category) {
            $query->where('category_id', $category->id);
        }

        // apply any additional filters
        if (request()->has('sort')) {
            $query->orderby(request()->input('sort'), request()->input('direction', 'desc'));
        } else {
            $query->latest();
        }

        // handle full page load vs. infinite scroll request
        if (!request()->header('x-inertia')) {
            // full page load - fetch all pages up to current
            $allresults = collect();

            for ($page = 1; $page <= $currentpage; $page++) {
                $pageresults = $query->paginate($perpage, ['*'], 'page', $page);
                $allresults = $allresults->concat($pageresults->items());
            }

            return new lengthawarepaginator(
                $allresults,
                post::query()
                    ->published()
                    ->when($category, fn($q) => $q->where('category_id', $category->id))
                    ->count(),
                $perpage,
                $currentpage
            );
        }

        return $query->paginate($perpage);
    }

    protected function getfeaturedpost()
    {
        return post::query()
            ->with(['author', 'category'])
            ->published()
            ->featured()
            ->latest()
            ->first();
    }
}

主要后端功能

1. 分页处理：

if (!request()->header('x-inertia')) {
    // full page load logic
} else {
    // regular pagination for infinite scroll
}

1. 整页加载：当用户刷新或直接访问页面时，我们会获取所有先前的页面以保持正确的滚动位置：

for ($page = 1; $page <= $currentpage; $page++) {
    $pageresults = $query->paginate($perpage, ['*'], 'page', $page);
    $allresults = $allresults->concat($pageresults->items());
}

1. 高效查询：实现包括关系预加载和范围查询：

$query = Post::query()
    ->with(['author', 'category'])
    ->published();

结论

使用 laravel 和 inertia.js v2.0 实现无限滚动可提供流畅的用户体验，同时保持良好的性能和 seo 实践。 vue 3 的 composition api 和 inertia.js 的 whenvisible 组件的结合使其易于实现和维护。

立即学习“前端免费学习笔记（深入）”；

记住：

• 彻底测试实现，特别是对于边缘情况
• 监控性能指标
• 考虑为禁用 javascript 的用户实施后备
• 实现无限滚动时请记住可访问性

此实现可以适用于博客文章之外的各种用例，例如产品列表、图片库或任何其他受益于无限滚动的内容。

其他资源

• inertia.js 文档
• laravel 文档
• vue 3 文档
• 无限滚动的网页可访问性指南