Infinite Scroll

Tính năng infinite scroll của Inertia tải thêm các trang nội dung khi người dùng cuộn, thay thế control phân trang truyền thống. Tính năng này phù hợp cho giao diện chat, social feed, lưới ảnh và danh sách sản phẩm.

Phía máy chủ

Để cấu hình dữ liệu phân trang cho infinite scrolling, bạn nên dùng phương thức Inertia::scroll() khi trả response. Phương thức tự động cấu hình hành vi merge phù hợp và chuẩn hóa pagination metadata cho frontend component.

Route::get('/users', function () {
    return Inertia::render('Users/Index', [
        'users' => Inertia::scroll(fn () => User::paginate())
    ]);
});

Method Inertia::scroll() hoạt động với các method paginate(), simplePaginate() và cursorPaginate() của Laravel, cũng như dữ liệu phân trang được bọc trong Eloquent API resource. Xem tài liệu method Inertia::scroll() để biết thêm.

Phía client

Ở phía client, Inertia cung cấp component <InfiniteScroll> để tự động tải thêm các trang nội dung. Component nhận prop data chỉ định key của prop chứa dữ liệu phân trang. Component <InfiniteScroll> cần bọc nội dung phụ thuộc vào dữ liệu này.

<script setup>
import { InfiniteScroll } from "@inertiajs/vue3";

defineProps(["users"]);
</script>

<template>
  <InfiniteScroll data="users">
    <div v-for="user in users.data" :key="user.id">
      {{ user.name }}
    </div>
  </InfiniteScroll>
</template>

import { InfiniteScroll } from "@inertiajs/react";

export default function Users({ users }) {
  return (
    <InfiniteScroll data="users">
      {users.data.map((user) => (
        <div key={user.id}>{user.name}</div>
      ))}
    </InfiniteScroll>
  );
}

<script>
    import { InfiniteScroll } from '@inertiajs/svelte'
    let { users } = $props()
</script>

<InfiniteScroll data="users">
    {#each users.data as user (user.id)}
        <div>{user.name}</div>
    {/each}
</InfiniteScroll>

Component dùng Intersection Observer để phát hiện khi người dùng cuộn gần cuối nội dung và tự động kích hoạt request tải page tiếp theo. Dữ liệu mới được merge với nội dung hiện có thay vì thay thế.

Loading buffer

Bạn có thể kiểm soát việc tải nội dung bắt đầu sớm đến mức nào bằng khoảng buffer. Buffer chỉ định số pixel trước cuối nội dung mà quá trình tải cần bắt đầu.

<InfiniteScroll data="users" :buffer="500">
    <!-- ... -->
</InfiniteScroll>

<InfiniteScroll data="users" buffer={500}>
  {/* ... */}
</InfiniteScroll>

<InfiniteScroll data="users" buffer={500}>
    <!-- ... -->
</InfiniteScroll>

Trong ví dụ trên, nội dung bắt đầu tải khi còn cách cuối phần hiện tại 500 pixel. Buffer lớn hơn tải nội dung sớm hơn nhưng có thể tải cả nội dung người dùng không bao giờ xem.

Đồng bộ URL

Component infinite scroll cập nhật query string URL của trình duyệt (?page=...) khi người dùng cuộn qua nội dung. URL phản ánh trang có nhiều item hiển thị nhất trên màn hình và cập nhật theo cả hai hướng khi cuộn lên hoặc xuống. Nhờ đó người dùng có thể bookmark hoặc chia sẻ liên kết đến trang cụ thể. Bạn có thể tắt hành vi này để giữ nguyên URL ban đầu.

<InfiniteScroll data="users" preserve-url>
    <!-- ... -->
</InfiniteScroll>

<InfiniteScroll data="users" preserveUrl>
  {/* ... */}
</InfiniteScroll>

<InfiniteScroll data="users" preserve-url>
    <!-- ... -->
</InfiniteScroll>

Điều này hữu ích khi infinite scroll được dùng cho nội dung phụ không nên ảnh hưởng URL chính của trang, chẳng hạn comment của bài blog hoặc sản phẩm liên quan.

Reset

Khi filter hoặc tham số khác thay đổi, bạn có thể cần reset dữ liệu infinite scroll để bắt đầu lại từ đầu. Nếu không reset, kết quả mới sẽ merge với nội dung hiện tại thay vì thay thế. Bạn có thể reset dữ liệu bằng visit option reset.

<script setup>
import { router } from "@inertiajs/vue3";

const show = (role) => {
  router.visit(route("users"), {
    data: { filter: { role } },
    only: ["users"],
    reset: ["users"],
  });
};
</script>

<template>
  <button @click="show('admin')">Show admins</button>
  <button @click="show('customer')">Show customers</button>

  <InfiniteScroll data="users">
    <div v-for="user in users.data" :key="user.id">
      {{ user.name }}
    </div>
  </InfiniteScroll>
</template>

import { InfiniteScroll, router } from '@inertiajs/react'

export default function Users({ users }) {
    const show = (role) => {
        router.visit(route('users'), {
            data: { filter: { role } },
            only: ['users'],
            reset: ['users'],
        })
    }

    return (

            <button onClick={() => show('admin')}>Show admins</button>
            <button onClick={() => show('customer')}>Show customers</button>

            <InfiniteScroll data="users">
                {users.data.map(user => (
                    <div key={user.id}>
                        {user.name}
                    </div>
                ))}
            </InfiniteScroll>

    )
}

<script>
    import { InfiniteScroll, router } from '@inertiajs/svelte'
    let { users } = $props()

    const show = (role) => {
        router.visit(route('users'), {
            data: { filter: { role } },
            only: ['users'],
            reset: ['users'],
        })
    }
</script>

<button onclick={() => show('admin')}>Show admins</button>
<button onclick={() => show('customer')}>Show customers</button>

<InfiniteScroll data="users">
    {#each users.data as user (user.id)}
        <div>{user.name}</div>
    {/each}
</InfiniteScroll>

Để biết thêm về tùy chọn reset, xem tài liệu Resetting props.

Hướng tải dữ liệu

Component infinite scroll tải nội dung theo cả hai hướng khi bạn cuộn gần đầu hoặc cuối. Bạn có thể kiểm soát bằng các prop only-next và only-previous.

<!-- Only load the next page -->
<InfiniteScroll data="users" only-next>
    <!-- ... -->
</InfiniteScroll>

<!-- Only load the previous page -->
<InfiniteScroll data="messages" only-previous>
    <!-- ... -->
</InfiniteScroll>

<!-- Load in both directions (default) -->
<InfiniteScroll data="posts">
    <!-- ... -->
</InfiniteScroll>

{
  /* Only load the next page */
}
<InfiniteScroll data="users" onlyNext>
  {/* ... */}
</InfiniteScroll>;

{
  /* Only load the previous page */
}
<InfiniteScroll data="messages" onlyPrevious>
  {/* ... */}
</InfiniteScroll>;

{
  /* Load in both directions (default) */
}
<InfiniteScroll data="posts">{/* ... */}</InfiniteScroll>;

<!-- Only load the next page -->
<InfiniteScroll data="users" only-next>
    <!-- ... -->
</InfiniteScroll>

<!-- Only load the previous page -->
<InfiniteScroll data="messages" only-previous>
    <!-- ... -->
</InfiniteScroll>

<!-- Load in both directions (default) -->
<InfiniteScroll data="posts">
    <!-- ... -->
</InfiniteScroll>

Option mặc định đặc biệt hữu ích khi người dùng bắt đầu ở một trang giữa và cần cuộn theo cả hai hướng để truy cập toàn bộ nội dung.

Reverse mode

Với ứng dụng chat, timeline hoặc giao diện có nội dung sắp xếp giảm dần (item mới nhất ở dưới cùng), bạn có thể bật reverse mode. Chế độ này cấu hình component tải nội dung cũ hơn khi cuộn lên.

<InfiniteScroll data="messages" reverse>
    <!-- ... -->
</InfiniteScroll>

<InfiniteScroll data="messages" reverse>
  {/* ... */}
</InfiniteScroll>

<InfiniteScroll data="messages" reverse>
    <!-- ... -->
</InfiniteScroll>

Trong reverse mode, component đảo hướng tải: cuộn lên tải trang kế tiếp (nội dung cũ hơn), cuộn xuống tải trang trước (nội dung mới hơn). Component xử lý vị trí khi loading, nhưng bạn chịu trách nhiệm đảo thứ tự nội dung để hiển thị đúng. Reverse mode cũng tự động cuộn xuống cuối ở lần tải đầu tiên; bạn có thể tắt bằng :auto-scroll="false".

<InfiniteScroll data="messages" reverse :auto-scroll="false">
    <!-- ... -->
</InfiniteScroll>

<InfiniteScroll data="messages" reverse autoScroll={false}>
  {/* ... */}
</InfiniteScroll>

<InfiniteScroll data="messages" reverse auto-scroll={false}>
    <!-- ... -->
</InfiniteScroll>

Manual mode

Manual mode tắt tự động tải khi cuộn và cho phép bạn kiểm soát thời điểm tải nội dung qua slot next và previous. Để biết chi tiết property slot và option tùy chỉnh, xem Slots.

<template>
  <InfiniteScroll data="users" manual>
    <template #previous="{ loading, fetch, hasMore }">
      <button v-if="hasMore" @click="fetch" :disabled="loading">
        {{ loading ? "Loading..." : "Load previous" }}
      </button>
    </template>

    <!-- Your content -->

    <template #next="{ loading, fetch, hasMore }">
      <button v-if="hasMore" @click="fetch" :disabled="loading">
        {{ loading ? "Loading..." : "Load more" }}
      </button>
    </template>
  </InfiniteScroll>
</template>

import { InfiniteScroll } from "@inertiajs/react";

export default ({ users }) => (
  <InfiniteScroll
    data="users"
    manual
    previous={({ loading, fetch, hasMore }) =>
      hasMore && (
        <button onClick={fetch} disabled={loading}>
          {loading ? "Loading..." : "Load previous"}
        </button>
      )
    }
    next={({ loading, fetch, hasMore }) =>
      hasMore && (
        <button onClick={fetch} disabled={loading}>
          {loading ? "Loading..." : "Load more"}
        </button>
      )
    }
  >
    {users.data.map((user) => (
      <div key={user.id}>{user.name}</div>
    ))}
  </InfiniteScroll>
);

<script>
    import { InfiniteScroll } from '@inertiajs/svelte'
    let { users } = $props()
</script>

<InfiniteScroll data="users" manual>
    {#snippet previous({ hasMore, fetch, loading })}
        {#if hasMore}
            <button onclick={fetch} disabled={loading}>
                {loading ? 'Loading...' : 'Load previous'}
            </button>
        {/if}
    {/snippet}

    {#each users.data as user (user.id)}
        <div>{user.name}</div>
    {/each}

    {#snippet next({ hasMore, fetch, loading })}
        {#if hasMore}
            <button onclick={fetch} disabled={loading}>
                {loading ? 'Loading...' : 'Load more'}
            </button>
        {/if}
    {/snippet}
</InfiniteScroll>

Bạn cũng có thể cấu hình component tự chuyển sang manual mode sau một số lượng trang nhất định bằng prop manualAfter.

<InfiniteScroll data="users" :manual-after="3">
    <!-- ... -->
</InfiniteScroll>

<InfiniteScroll data="users" manualAfter={3}>
  {/* ... */}
</InfiniteScroll>

<InfiniteScroll data="users" manual-after={3}>
    <!-- ... -->
</InfiniteScroll>

Slots

Component infinite scroll cung cấp nhiều slot để tùy chỉnh trải nghiệm loading. Các slot cho phép hiển thị loading indicator tùy chỉnh và tạo control tải thủ công. Mỗi slot nhận property cung cấp thông tin trạng thái loading và function kích hoạt tải nội dung.

Default slot

Khu vực nội dung chính nơi bạn render item dữ liệu. Slot này nhận thông tin trạng thái loading.

<InfiniteScroll
  data="users"
  #default="{ loading, loadingPrevious, loadingNext }"
>
    <!-- Your content with access to loading states -->
</InfiniteScroll>

<InfiniteScroll data="users">
  {({ loading, loadingPrevious, loadingNext }) => (
    <div>{/* Your content with access to loading states */}</div>
  )}
</InfiniteScroll>

<InfiniteScroll data="users">
    {#snippet children({ loading, loadingPrevious, loadingNext })}
        <!-- Your content with access to loading states -->
    {/snippet}
</InfiniteScroll>

Loading slot

Loading slot được dùng làm fallback khi đang tải nội dung và không có custom slot before hoặc after. Nó tạo loading indicator mặc định.

<template>
  <InfiniteScroll data="users">
    <!-- Your content -->

    <template #loading> Loading more users... </template>
  </InfiniteScroll>
</template>

<InfiniteScroll data="users" loading={() => "Loading more users..."}>
  {/* Your content */}
</InfiniteScroll>

<InfiniteScroll data="users">
    <!-- Your content -->

    {#snippet loading()}
        Loading more users...
    {/snippet}
</InfiniteScroll>

Slot Previous và Next

Slot previous và next được render phía trên và dưới nội dung chính, thường dùng làm control tải thủ công. Các slot nhận nhiều property gồm trạng thái loading, function fetch và chỉ báo mode.

<template>
  <InfiniteScroll data="users" :manual-after="3">
    <template #previous="{ loading, fetch, hasMore, manualMode }">
      <button v-if="manualMode && hasMore" @click="fetch" :disabled="loading">
        {{ loading ? "Loading..." : "Load previous" }}
      </button>
    </template>

    <!-- Your content -->

    <template #next="{ loading, fetch, hasMore, manualMode }">
      <button v-if="manualMode && hasMore" @click="fetch" :disabled="loading">
        {{ loading ? "Loading..." : "Load more" }}
      </button>
    </template>
  </InfiniteScroll>
</template>

Các slot loading, previous và next nhận những property sau:

Thuộc tính	Mô tả
`loading`	Slot hiện có đang tải nội dung hay không
`loadingPrevious`	Nội dung trước đó có đang được tải hay không
`loadingNext`	Nội dung tiếp theo có đang được tải hay không
`fetch`	Function kích hoạt tải cho slot
`hasMore`	Slot còn nội dung để tải hay không
`hasPrevious`	Còn nội dung trước đó hay không
`hasNext`	Còn nội dung tiếp theo hay không
`manualMode`	Manual mode có đang active hay không
`autoMode`	Automatic loading có đang active hay không

Custom element

Component InfiniteScroll render dưới dạng phần tử <div>. Bạn có thể tùy chỉnh thành bất kỳ element HTML nào bằng prop as.

<template>
  <InfiniteScroll data="products" as="ul">
    <li v-for="product in products.data" :key="product.id">
      {{ product.name }}
    </li>
  </InfiniteScroll>
</template>

<InfiniteScroll data="products" as="ul">
  {products.data.map((product) => (
    <li key={product.id}>{product.name}</li>
  ))}
</InfiniteScroll>

<InfiniteScroll data="products" as="ul">
    {#each products.data as product (product.id)}
        <li>{product.name}</li>
    {/each}
</InfiniteScroll>

Target element

Component infinite scroll tự động theo dõi nội dung và gán số trang cho element để đồng bộ URL. Khi item dữ liệu không phải child trực tiếp của root element của component, bạn cần chỉ định element thực sự chứa item bằng prop itemsElement.

<template>
  <InfiniteScroll data="users" items-element="#table-body">
    <table>
      <thead>
        <tr>
          <th>Name</th>
        </tr>
      </thead>
      <tbody id="table-body">
        <tr v-for="user in users.data" :key="user.id">
          <td>{{ user.name }}</td>
        </tr>
      </tbody>
    </table>
  </InfiniteScroll>
</template>

<InfiniteScroll data="users" itemsElement="#table-body">
  <table>
    <thead>
      <tr>
        <th>Name</th>
      </tr>
    </thead>
    <tbody id="table-body">
      {users.data.map((user) => (
        <tr key="{user.id}">
          <td>{user.name}</td>
        </tr>
      ))}
    </tbody>
  </table>
</InfiniteScroll>

<InfiniteScroll data="users" items-element="#table-body">
    <table>
        <thead>
            <tr><th>Name</th></tr>
        </thead>
        <tbody id="table-body">
            {#each users.data as user (user.id)}
            <tr>
                <td>{user.name}</td>
            </tr>
            {/each}
        </tbody>
    </table>
</InfiniteScroll>

Trong ví dụ này, component theo dõi element #table-body và tự động gắn số trang cho từng <tr> khi nội dung mới được tải. Điều này cho phép URL cập nhật chính xác dựa trên nội dung của trang nào đang hiển thị nhiều nhất trong viewport. Bạn cũng có thể chỉ định custom trigger element để tải thêm nội dung bằng CSS selector. Khi đó các trigger element mặc định sẽ không được render và Intersection Observer sẽ theo dõi custom element thay thế.

<template>
  <InfiniteScroll
    data="users"
    items-element="#table-body"
    start-element="#table-header"
    end-element="#table-footer"
  >
    <table>
      <thead id="table-header">
        <tr>
          <th>Name</th>
        </tr>
      </thead>
      <tbody id="table-body">
        <tr v-for="user in users.data" :key="user.id">
          <td>{{ user.name }}</td>
        </tr>
      </tbody>
      <tfoot id="table-footer">
        <tr>
          <td>Footer</td>
        </tr>
      </tfoot>
    </table>
  </InfiniteScroll>
</template>

<InfiniteScroll
  data="users"
  itemsElement="#table-body"
  startElement="#table-header"
  endElement="#table-footer"
>
  <table>
    <thead id="table-header">
      <tr>
        <th>Name</th>
      </tr>
    </thead>
    <tbody id="table-body">
      {users.data.map((user) => (
        <tr key={user.id}>
          <td>{user.name}</td>
        </tr>
      ))}
    </tbody>
    <tfoot id="table-footer">
      <tr>
        <td>Footer</td>
      </tr>
    </tfoot>
  </table>
</InfiniteScroll>

<InfiniteScroll
    data="users"
    items-element="#table-body"
    start-element="#table-header"
    end-element="#table-footer"
>
    <table>
        <thead id="table-header">
            <tr><th>Name</th></tr>
        </thead>
        <tbody id="table-body">
            {#each users.data as user (user.id)}
                <tr>
                    <td>{user.name}</td>
                </tr>
            {/each}
        </tbody>
        <tfoot id="table-footer">
            <tr><td>Footer</td></tr>
        </tfoot>
    </table>
</InfiniteScroll>

Ngoài ra, bạn có thể dùng template ref thay cho CSS selector. Cách này tránh phải thêm HTML attribute và cung cấp tham chiếu element trực tiếp.

<script setup>
import { ref } from "vue";
const tableHeader = ref();
const tableFooter = ref();
const tableBody = ref();
</script>

<template>
  <InfiniteScroll
    data="users"
    :items-element="() => tableBody"
    :start-element="() => tableHeader"
    :end-element="() => tableFooter"
  >
    <table>
      <thead ref="tableHeader">
        <tr>
          <th>Name</th>
        </tr>
      </thead>
      <tbody ref="tableBody">
        <tr v-for="user in users.data" :key="user.id">
          <td>{{ user.name }}</td>
        </tr>
      </tbody>
      <tfoot ref="tableFooter">
        <tr>
          <td>Footer</td>
        </tr>
      </tfoot>
    </table>
  </InfiniteScroll>
</template>

import { useRef } from "react";

export default ({ users }) => {
  const tableHeader = useRef();
  const tableFooter = useRef();
  const tableBody = useRef();

  return (
    <InfiniteScroll
      data="users"
      itemsElement={tableBody}
      startElement={tableHeader}
      endElement={tableFooter}
    >
      <table>
        <thead ref={tableHeader}>
          <tr>
            <th>Name</th>
          </tr>
        </thead>
        <tbody ref={tableBody}>
          {users.data.map((user) => (
            <tr key={user.id}>
              <td>{user.name}</td>
            </tr>
          ))}
        </tbody>
        <tfoot ref={tableFooter}>
          <tr>
            <td>Footer</td>
          </tr>
        </tfoot>
      </table>
    </InfiniteScroll>
  );
};

<script>
    import { InfiniteScroll } from '@inertiajs/svelte'
    let { users } = $props()

    let tableHeader
    let tableFooter
    let tableBody
</script>

<InfiniteScroll
    data="users"
    items-element={() => tableBody}
    start-element={() => tableHeader}
    end-element={() => tableFooter}
>
    <table>
        <thead bind:this={tableHeader}>
            <tr><th>Name</th></tr>
        </thead>
        <tbody bind:this={tableBody}>
            {#each users.data as user (user.id)}
                <tr>
                    <td>{user.name}</td>
                </tr>
            {/each}
        </tbody>
        <tfoot bind:this={tableFooter}>
            <tr><td>Footer</td></tr>
        </tfoot>
    </table>
</InfiniteScroll>

Scroll container

Component infinite scroll hoạt động trong bất kỳ container có thể cuộn nào, không chỉ document chính. Component tự động thích nghi để dùng custom scroll container cho việc phát hiện trigger và tính toán thay cho scroll của document chính.

<template>
  <div style="height: 400px; overflow-y: auto;">
    <InfiniteScroll data="users">
      <div v-for="user in users.data" :key="user.id">
        {{ user.name }}
      </div>
    </InfiniteScroll>
  </div>
</template>

<div style={{ height: "400px", overflowY: "auto" }}>
  <InfiniteScroll data="users">
    {users.data.map((user) => (
      <div key={user.id}>{user.name}</div>
    ))}
  </InfiniteScroll>
</div>

<div style="height: 400px; overflow-y: auto;">
    <InfiniteScroll data="users">
        {#each users.data as user (user.id)}
            <div>{user.name}</div>
        {/each}
    </InfiniteScroll>
</div>

Nhiều scroll container

Đôi khi bạn cần render nhiều component infinite scroll trên cùng một trang. Tuy nhiên, nếu cả hai đều dùng query parameter page mặc định để đồng bộ URL, chúng sẽ xung đột. Để giải quyết, hãy yêu cầu mỗi paginator dùng pageName riêng.

Route::get('/dashboard', function () {
    return Inertia::render('Dashboard', [
        'users' => Inertia::scroll(
            fn() => User::paginate(pageName: 'users')
        ),
        'orders' => Inertia::scroll(
            fn() => Order::paginate(pageName: 'orders')
        ),
    ]);
});

Method Inertia::scroll() tự động phát hiện pageName từ từng paginator, cho phép các scroll container duy trì pagination state độc lập. Kết quả URL sẽ có dạng ?users=2&orders=3 thay vì xung đột ở parameter ?page=. Để biết thêm về page name của pagination, xem tài liệu Laravel.

Truy cập bằng code

Khi cần kích hoạt action tải dữ liệu bằng code, bạn có thể dùng template ref.

<script setup>
import { ref } from "vue";
const infiniteScrollRef = ref(null);

const fetchNext = () => {
  infiniteScrollRef.value?.fetchNext();
};
</script>

<template>
  <button @click="fetchNext">Load More</button>

  <InfiniteScroll ref="infiniteScrollRef" data="users" manual>
    <!-- Your content -->
  </InfiniteScroll>
</template>

import { InfiniteScroll } from '@inertiajs/react'
import { useRef } from 'react'

export default ({ users }) => {
    const infiniteScrollRef = useRef(null)

    const fetchNext = () => {
        infiniteScrollRef.current?.fetchNext()
    }

    return (

            <button onClick={fetchNext}>Load More</button>

            <InfiniteScroll ref={infiniteScrollRef} data="users" manual>
                {users.data.map(user => (
                    <div key={user.id}>{user.name}</div>
                ))}
            </InfiniteScroll>

    )
}

<script>
    import { InfiniteScroll } from '@inertiajs/svelte'
    let { users } = $props()

    let infiniteScrollRef

    const fetchNext = () => {
        infiniteScrollRef?.fetchNext()
    }
</script>

<button onclick={fetchNext}>Load More</button>

<InfiniteScroll bind:this={infiniteScrollRef} data="users" manual>
    {#each users.data as user (user.id)}
        <div>{user.name}</div>
    {/each}
</InfiniteScroll>

Component expose các method sau:

fetchNext() - Chủ động lấy trang tiếp theo
fetchPrevious() - Chủ động lấy trang trước
hasNext() - Có trang tiếp theo hay không
hasPrevious() - Có trang trước hay không

Method Inertia::scroll()

Phương thức Inertia::scroll() cung cấp cấu hình phía server cho infinite scrolling. Nó tự động cấu hình merge để dữ liệu mới được append hoặc prepend vào nội dung hiện có thay vì thay thế, đồng thời chuẩn hóa pagination metadata cho frontend component.

// Works with all Laravel pagination methods...
Inertia::scroll(User::paginate(20));
Inertia::scroll(User::simplePaginate(20));
Inertia::scroll(User::cursorPaginate(20));

// Works with API resources...
Inertia::scroll(UserResource::collection(User::paginate(20)));

Nếu không dùng paginator của Laravel hoặc dùng transformation layer khác, bạn có thể sử dụng các đối số bổ sung mà scroll() hỗ trợ.

// Customize the data wrapper key (defaults to 'data')...
Inertia::scroll($customPaginatedData, wrapper: 'items');

// Provide custom metadata resolution...
Inertia::scroll($data, metadata: $metadataProvider);

Tham số metadata nhận instance ProvidesScrollMetadata hoặc callback trả về instance đó. Callback nhận tham số $data. Điều này hữu ích khi tích hợp thư viện pagination bên thứ ba như Fractal.

use League\Fractal\Resource\Collection;

class FractalScrollMetadata implements ProvidesScrollMetadata
{
    public function __construct(protected Collection $resource) {}
    public function getPageName(): string {}
    public function getPreviousPage(): int|string|null {}
    public function getNextPage(): int|string|null {}
    public function getCurrentPage(): int|string|null {}
}

Sau đó bạn có thể dùng custom metadata provider này trong scroll function.

// Using an instance directly
Inertia::scroll($data, metadata: new FractalScrollMetadata($data));

// Using a callback
Inertia::scroll(
    fn() => $this->transformData($data),
    metadata: fn($data) => new FractalScrollMetadata($data)
);

Để tránh lặp setup này trong nhiều controller, bạn có thể định nghĩa macro.

// In your AppServiceProvider's boot method
Inertia::macro('fractalScroll', function (Collection $data) {
    return Inertia::scroll(
        $data,
        metadata: fn(Collection $data) => new FractalScrollMetadata($data)
    );
});

// Then use it in your controllers
return Inertia::render('Users/Index', [
    'users' => Inertia::fractalScroll($fractalCollection)
]);

Tài liệu chính thức

Bài dịch này được đối chiếu từ tài liệu Inertia.js v3 chính thức. Nếu có khác biệt do phiên bản hoặc cập nhật mới, hãy ưu tiên tài liệu chính thức làm nguồn tham chiếu.

Bắt đầu

Cài đặt

Khái niệm cốt lõi

Kiến thức cơ bản

Dữ liệu & Props

Bảo mật

Nâng cao

Phía máy chủ

Phía client

Loading buffer

Đồng bộ URL

Reset

Hướng tải dữ liệu

Reverse mode

Manual mode

Slots

Default slot

Loading slot

Slot Previous và Next

Custom element

Target element

Scroll container

Nhiều scroll container

Truy cập bằng code

Method Inertia::scroll()

Tài liệu chính thức

​Phía máy chủ

​Phía client

​Loading buffer

​Đồng bộ URL

​Reset

​Hướng tải dữ liệu

​Reverse mode

​Manual mode

​Slots

​Default slot

​Loading slot

​Slot Previous và Next

​Custom element

​Target element

​Scroll container

​Nhiều scroll container

​Truy cập bằng code

​Method Inertia::scroll()

​Tài liệu chính thức

Phía máy chủ

Phía client

Loading buffer

Đồng bộ URL

Reset

Hướng tải dữ liệu

Reverse mode

Manual mode

Slots

Default slot

Loading slot

Slot Previous và Next

Custom element

Target element

Scroll container

Nhiều scroll container

Truy cập bằng code

Method Inertia::scroll()

Tài liệu chính thức