如何将Firestore+Vue用户档案页面改为无限滚动加载？

问题现状 #

在Firestore存储大量用户档案，通过Vue的v-for展示，想要实现每次加载4条，滚动页面时加载下一批，但当前代码每次都重复加载前4条，无法实现分页加载。

原代码 #

获取档案的JavaScript代码 #

const getPremium = () => {
    const Premium = ref([])
    const error = ref(null)

    const load = async () => {
        try{
            const res = await projectFirestore.collection('Premium').limit(4).get()

            Premium.value = res.docs.map(doc => {
                console.log(doc.data())
                return {...doc.data(), id: doc.id}
            })
        }
        catch (err){
            error.value = err.message
            console.log(error.value)
        }
    }

    return { Premium, error, load}
}

export default getPremium

Vue页面代码 #

<script setup>
import getPremium from "../Composables/getPremium.js";
const {Premium, error, load} = getPremium();
load();
</script>

<template>
<br> 
 <div class="grid ...">

 <div v-for ="Premiums in Premium" :key="Premiums.id">
   <router-link :to="{ name: 'Samplepremium', params: { id: Premiums.id }}">
     <div class= "hover:scale-105 ...">
       <br>
         <p class="text-xl">{{ Premiums.name }}</p>
           <div class="relative">
             <img :src= "Premiums.Pic1"  class="object-contain ...">
             <p class="bg-red-700 text-slate-300 ...">{{ Premiums.det1 }}</p>
             <p class="bg-red-700 text-slate-300 ..."> {{ Premiums.det2 }} </p>
           </div>
           <div class="grid grid-cols-2 grid-rows-fit text-left ml-6">
             <p>Age:</p>
             <p>{{ Premiums.det3 }}</p>
             <p>Location:</p>
             <p>{{ Premiums.det4 }}</p>
             <p>Rates:</p>
             <p>{{ Premiums.det5 }} /hr</p>
             <p>Phone:</p>
             <p>{{ Premiums.det6 }}</p>
           </div>
           <br>
     </div>
   </router-link>
 </div>

</template>

可行实现方案 #

1. 修改getPremium组合式函数 #

添加分页关键变量，修改加载逻辑为追加数据而非覆盖，通过Firestore的startAfter实现分页：

import { ref } from 'vue'

const getPremium = () => {
    const Premium = ref([])
    const error = ref(null)
    const lastDoc = ref(null) // 记录最后一条文档快照，用于分页定位
    const isLoading = ref(false) // 防止重复触发加载请求
    const hasMore = ref(true) // 标记是否还有更多数据

    const load = async (isFirstLoad = true) => {
        if (isLoading.value || !hasMore.value) return
        
        isLoading.value = true
        try{
            let query = projectFirestore.collection('Premium').limit(4)
            // 非首次加载时，从上次最后一条文档后开始查询
            if (!isFirstLoad && lastDoc.value) {
                query = query.startAfter(lastDoc.value)
            }

            const res = await query.get()

            // 返回空文档则标记无更多数据
            if (res.empty) {
                hasMore.value = false
                isLoading.value = false
                return
            }

            // 更新最后一条文档快照
            lastDoc.value = res.docs[res.docs.length - 1]

            if (isFirstLoad) {
                Premium.value = res.docs.map(doc => ({...doc.data(), id: doc.id}))
            } else {
                // 非首次加载追加新数据
                const newDocs = res.docs.map(doc => ({...doc.data(), id: doc.id}))
                Premium.value = [...Premium.value, ...newDocs]
            }
        }
        catch (err){
            error.value = err.message
            console.log(error.value)
        } finally {
            isLoading.value = false
        }
    }

    return { Premium, error, load, isLoading, hasMore}
}

export default getPremium

2. 修改Vue页面代码 #

添加滚动监听逻辑，触发下一页加载，同时增加加载状态和无数据提示：

<script setup>
import getPremium from "../Composables/getPremium.js";
import { onMounted, onUnmounted } from 'vue'

const {Premium, error, load, isLoading, hasMore} = getPremium();

// 首次加载数据
load(true)

// 滚动触底判断函数
const handleScroll = () => {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
    const clientHeight = document.documentElement.clientHeight || window.innerHeight

    // 距离底部100px时触发加载（可调整阈值）
    if (scrollTop + clientHeight >= scrollHeight - 100 && !isLoading.value && hasMore.value) {
        load(false)
    }
}

// 挂载时添加滚动监听
onMounted(() => {
    window.addEventListener('scroll', handleScroll)
})

// 卸载时移除监听，避免内存泄漏
onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll)
})
</script>

<template>
<br> 
 <div class="grid ...">
   <div v-for ="premium in Premium" :key="premium.id">
     <router-link :to="{ name: 'Samplepremium', params: { id: premium.id }}">
       <div class= "hover:scale-105 ...">
         <br>
           <p class="text-xl">{{ premium.name }}</p>
             <div class="relative">
               <img :src= "premium.Pic1"  class="object-contain ...">
               <p class="bg-red-700 text-slate-300 ...">{{ premium.det1 }}</p>
               <p class="bg-red-700 text-slate-300 ..."> {{ premium.det2 }} </p>
             </div>
             <div class="grid grid-cols-2 grid-rows-fit text-left ml-6">
               <p>Age:</p>
               <p>{{ premium.det3 }}</p>
               <p>Location:</p>
               <p>{{ premium.det4 }}</p>
               <p>Rates:</p>
               <p>{{ premium.det5 }} /hr</p>
               <p>Phone:</p>
               <p>{{ premium.det6 }}</p>
             </div>
             <br>
       </div>
     </router-link>
   </div>

   <!-- 加载状态提示 -->
   <div v-if="isLoading" class="text-center py-4">
     <p>加载中...</p>
   </div>

   <!-- 无更多数据提示 -->
   <div v-if="!hasMore && Premium.length > 0" class="text-center py-4 text-gray-500">
     <p>已加载全部内容</p>
   </div>
 </div>
</template>

关键说明 #

• Firestore分页核心：通过startAfter(lastDoc)实现从最后一条文档之后查询下一批数据，必须记录每次查询的最后一条文档快照。
• 防重复请求：用isLoading状态控制，避免滚动时多次触发加载。
• 无数据判断：当查询返回空文档时，标记hasMore为false，停止后续加载。
• 滚动优化：设置100px提前加载阈值，用户接近底部时触发加载，提升体验。

内容的提问来源于stack exchange，提问作者Epimetheus14