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

<script setup>
import { computed } from 'vue'
import { usepage, whenvisible } from '@inertiajs/vue3'
import loadingspinner from '@/components/loadingspinner.vue'
import blogpostcard from '@/components/blogpostcard.vue'

const page = usepage()

const hasfeaturepost = computed(() => !!page.props.featuredpost)
const categoryname = computed(() => page.props.category?.name)
</script>

<template>
    <div class="bg-gray-50">
        <!-- featured post section -->
        <div
            v-if="hasfeaturepost"
            class="container"
        >
            <div class="py-8 text-center">
                <h2 class="mb-4 text-3xl font-bold">
                    featured post: {{ page.props.featuredpost.title }}
                </h2>
            </div>
        </div>

        <!-- posts grid -->
        <div class="max-w-7xl px-4 py-8 mx-auto sm:px-6 lg:px-8">
            <h1 class="text-2xl font-bold mb-6">
                {{ categoryname ? `posts in ${categoryname}` : 'all posts' }}
            </h1>

            <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
                <div
                    v-for="post in page.props.posts"
                    :key="post.id"
                    class="relative flex flex-col"
                >
                    <blog-post-card :post="post" />
                </div>

                <!-- infinite scroll handler -->
                <whenvisible
                    :always="page.props.postspagination?.current_page < page.props.postspagination?.last_page"
                    :params="{
                        data: {
                            page: page.props.postspagination.current_page + 1,
                        },
                        only: ['posts', 'postspagination'],
                    }"
                >
                    <div
                        v-if="page.props.postspagination?.current_page >= page.props.postspagination?.last_page"
                        class="text-center py-6 text-gray-600 col-span-1 md:col-span-2 lg:col-span-3"
                    >
                        you've reached the end!
                    </div>
                    <div
                        v-else
                        class="col-span-1 md:col-span-2 lg:col-span-3"
                    >
                        <loading-spinner />
                    </div>
                </whenvisible>
            </div>
        </div>
    </div>
</template>

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

<?php

namespace app\http\controllers;

use app\models\post;
use app\models\category;
use illuminate\pagination\lengthawarepaginator;
use inertia\inertia;

class blogcontroller extends controller
{
    public function index(?category $category = null)
    {
        return inertia::render('blog/index', [
            'category' => $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();
    }
}

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

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

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