在這篇綜合指南中，我們將探索如何使用 Inertia.js v2.0 和 Vue 3 在 Laravel 應(yīng)用程序中實(shí)現(xiàn)無(wú)限滾動(dòng)。我們將涵蓋前端和后端實(shí)現(xiàn)，特別注意處理全頁(yè)刷新和維護(hù)滾動(dòng)位置。

目錄

• 了解組件
• 前端實(shí)現(xiàn)
• 后端實(shí)現(xiàn)
• 現(xiàn)實(shí)示例：帶有類(lèi)別的博客文章
• 最佳實(shí)踐和注意事項(xiàng)

了解組件

無(wú)限滾動(dòng)的實(shí)現(xiàn)依賴(lài)于三個(gè)主要組件：

1. Inertia.js v2.0 的 WhenVisible 組件：該組件處理交叉觀察者邏輯以檢測(cè)何時(shí)需要加載更多內(nèi)容。
2. Laravel 的分頁(yè)：處理服務(wù)器端分頁(yè)邏輯。
3. Vue 3 的 Composition API：管理我們的前端狀態(tài)和反應(yīng)性。

前端實(shí)施

讓我們從一個(gè)為博客文章列表實(shí)現(xiàn)無(wú)限滾動(dòng)的 Vue 組件開(kāi)始：

<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>



<h3>
  
  
  Key Frontend Features
</h3>

<ol>
<li><p><strong>WhenVisible Component</strong>: This component from Inertia.js v2.0 automatically triggers a request when the element becomes visible in the viewport.</p></li>
<li><p><strong>Pagination Parameters</strong>:<br>
</p></li>
</ol>

<pre class="brush:php;toolbar:false">:params="{
    data: {
        page: page.props.postsPagination.current_page + 1,
    },
    only: ['posts', 'postsPagination'],
}"

• data：指定要加載的下一頁(yè)
• only：通過(guò)僅獲取所需數(shù)據(jù)來(lái)優(yōu)化請(qǐng)求

1. 加載狀態(tài)：組件優(yōu)雅地處理加載和內(nèi)容結(jié)束狀態(tài)。

后端實(shí)施

這是處理常規(guī)分頁(yè)和整頁(yè)加載場(chǎng)景的 Laravel 控制器實(shí)現(xiàn)：

<?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();
    }
}

主要后端功能

1. 分頁(yè)處理：

if (!request()->header('X-Inertia')) {
    // Full page load logic
} else {
    // Regular pagination for infinite scroll
}

1. 整頁(yè)加載：當(dāng)用戶(hù)刷新或直接訪問(wèn)頁(yè)面時(shí)，我們會(huì)獲取所有先前的頁(yè)面以保持正確的滾動(dòng)位置：

for ($page = 1; $page <= $currentPage; $page++) {
    $pageResults = $query->paginate($perPage, ['*'], 'page', $page);
    $allResults = $allResults->concat($pageResults->items());
}

1. 高效查詢(xún)：實(shí)現(xiàn)包括關(guān)系預(yù)加載和范圍查詢(xún)：

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

結(jié)論

使用 Laravel 和 Inertia.js v2.0 實(shí)現(xiàn)無(wú)限滾動(dòng)可提供流暢的用戶(hù)體驗(yàn)，同時(shí)保持良好的性能和 SEO 實(shí)踐。 Vue 3 的 Composition API 和 Inertia.js 的 WhenVisible 組件的結(jié)合使其易于實(shí)現(xiàn)和維護(hù)。

記住：

• 徹底測(cè)試實(shí)現(xiàn)，特別是對(duì)于邊緣情況
• 監(jiān)控性能指標(biāo)
• 考慮為禁用 JavaScript 的用戶(hù)實(shí)施后備
• 實(shí)現(xiàn)無(wú)限滾動(dòng)時(shí)請(qǐng)記住可訪問(wèn)性

此實(shí)現(xiàn)可以適用于博客文章之外的各種用例，例如產(chǎn)品列表、圖片庫(kù)或任何其他受益于無(wú)限滾動(dòng)的內(nèi)容。

其他資源

• Inertia.js 文檔
• Laravel 文檔
• Vue 3 文檔
• 無(wú)限滾動(dòng)的網(wǎng)頁(yè)可訪問(wèn)性指南

以上是使用 Laravel、Inertia.js v 和 Vue 3 實(shí)現(xiàn)無(wú)限滾動(dòng)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！