useInfiniteScroll 的功能宛如開啟了一個無限延伸的領域，每當我往下滑動，都能看見更多內容。然而，就在我沉浸其中時，阿狗兄突然來訪，直言我學習不夠認真。
「你每次都只學點皮毛，這樣怎麼能真正掌握 VueUse？」他的話直截了當，讓我不禁開始反思。儘管我一直在學習，但阿狗兄或許說得有理—我的專注力時常分散，總是急於瀏覽所有內容，卻忽略了深入研究的重要性。

前情提要

useInfiniteScroll 是用來實現無限滾動功能的 VueUse 函式。本文將詳細介紹其功能、參數和使用場景，並提供實用範例。

useInfiniteScroll API

功能

useInfiniteScroll監聽指定元素的滾動事件，並在滾動達到特定條件時觸發加載更多內容的回調函式。它支援多方向滾動監聽，並提供豐富的參數，如滾動距離的閾值和觸發間隔。適用於實現無限加載或虛擬滾動列表的場景。

Props

options 參數

返回值

useInfiniteScroll 返回一個包含以下屬性的對象：

用法範例

範例 1：基本用法

試試看 VueUse Playground

<template>
  <div ref="container" style="height: 300px; overflow-y: auto;">
    <div v-for="item in items" :key="item">{{ item }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useInfiniteScroll } from '@vueuse/core'

const container = ref(null)
const items = ref(Array.from({ length: 20 }, (_, i) => i + 1))

const { isLoading } = useInfiniteScroll(
  container,
  async () => {
    // 模擬異步加載
    await new Promise(resolve => setTimeout(resolve, 1000))
    const newItems = Array.from({ length: 20 }, (_, i) => items.value.length + i + 1)
    items.value.push(...newItems)
  },
  { distance: 10 }
)
</script>

範例 2：使用自定義加載條件

試試看 VueUse Playground

<template>
  <div ref="container" style="height: 300px; overflow-y: auto;">
    <div v-for="item in items" :key="item">{{ item }}</div>
    <div v-if="isLoading && canLoadMore">加載中...</div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useInfiniteScroll } from '@vueuse/core'

const container = ref(null)
const items = ref(Array.from({ length: 20 }, (_, i) => i + 1))
const maxItems = 100

const canLoadMore = computed(
  ()=>items.value.length < maxItems
)

const { isLoading } = useInfiniteScroll(
  container,
  async () => {
    await new Promise(resolve => setTimeout(resolve, 1000))
    const newItems = Array.from({ length: 20 }, (_, i) => items.value.length + i + 1)
    items.value.push(...newItems.slice(0, maxItems - items.value.length))
  },
  {
    distance: 10,
    canLoadMore
  }
)
</script>

useInfiniteScroll 的使用場景

1. 長列表渲染：展示大量資料時，使用 useInfiniteScroll 實現分批加載，提高頁面性能。
2. 社交媒體動態：在社交媒體的資訊流中，利用此函式實現滾動到底部自動載入更多內容。
3. 搜尋結果頁面：展示搜尋結果時，實現滾動載入更多結果，增強用戶體驗。
4. 圖片庫：在圖片展示應用中，運用無限滾動來載入更多圖片。

為什麼開發者需要 useInfiniteScroll

1. 提升用戶體驗：無限滾動可以讓用戶流暢地瀏覽大量內容，無需手動翻頁。
2. 優化性能：通過分批加載資料，可以減少初始加載時間，提高應用性能。
3. 簡化開發：useInfiniteScroll 封裝了複雜的滾動監聽和加載邏輯，簡化了開發流程。
4. 靈活設定：提供了多種設定選項，可以根據不同需求自定義滾動行為。

結論

useInfiniteScroll簡化了 Vue 應用中無限滾動功能的實現。透過提供直觀的 API 和豐富的設定參數，useInfiniteScroll能夠處理從簡單的列表載入到複雜的虛擬滾動等各種場景。

合理運用useInfiniteScroll，可顯著減少編寫滾動監聽和資料載入邏輯的工作量。提升了應用的效能和程式碼的可讀性與可維護性。

這兩天颱風天大家注意安全喔～～今天就先到這邊，如果有看到錯誤再麻煩留言讓我知道喔