拥抱无限：使用 Vue 3 实现自研数据无限加载功能

2024-02-17 12:15:21

在这个数据爆炸的时代，无缝且高效地加载数据变得至关重要。Vue 3 凭借其强大的功能和直观的 API，为我们提供了构建自研数据无限加载功能的绝佳平台。本文将指导您逐步完成实现这一功能的过程，让您能够创建令人惊叹的用户体验。

一、封装无限加载功能

为了封装无限加载功能，我们将使用 @vueuse/core 库中的 useInfiniteQuery 函数。此函数允许我们以响应式方式获取分页数据，使其非常适合我们的无限加载场景。

1. 安装 `@vueuse/core`

npm install @vueuse/core

2. 导入 `useInfiniteQuery` 函数

import { useInfiniteQuery } from '@vueuse/core'

3. 定义 `fetchFn` 函数

fetchFn 函数负责从服务器获取数据。在这个函数中，我们通常会使用 fetch 或 axios 等网络库来获取数据。

const fetchFn = async (page) => {
  const res = await fetch(`https://example.com/api/data?page=${page}`)
  return res.json()
}

4. 调用 `useInfiniteQuery` 函数

现在，我们可以使用 useInfiniteQuery 函数来获取分页数据。

const { data, isLoading, isError } = useInfiniteQuery('my-data', fetchFn)

data 是一个响应式对象，它包含分页数据。
isLoading 是一个布尔值，表示数据是否正在加载中。
isError 是一个布尔值，表示是否发生错误。

二、触底加载

要实现触底加载功能，我们需要监听滚动事件并检查是否到达页面底部。

1. 创建 `onScroll` 函数

const onScroll = () => {
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    // 触发加载更多数据的操作
  }
}

2. 添加事件侦听器

window.addEventListener('scroll', onScroll)

三、显示加载状态

在数据加载过程中，我们可以通过显示加载指示符来通知用户。

1. 定义加载状态变量

const isLoadingMore = ref(false)

2. 在 `onScroll` 函数中更新加载状态

if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
  isLoadingMore.value = true
  // 触发加载更多数据的操作
}

四、示例代码

<template>
  <div>
    <ul>
      <li v-for="item in data.value" :key="item.id">{{ item.name }}</li>
    </ul>
    <div v-if="isLoadingMore">正在加载更多...</div>
  </div>
</template>

<script>
import { useInfiniteQuery, ref } from '@vueuse/core'

export default {
  setup() {
    const fetchFn = async (page) => {
      const res = await fetch(`https://example.com/api/data?page=${page}`)
      return res.json()
    }

    const { data, isLoading, isError } = useInfiniteQuery('my-data', fetchFn)
    const isLoadingMore = ref(false)

    const onScroll = () => {
      if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        isLoadingMore.value = true
        // 触发加载更多数据的操作
      }
    }

    window.addEventListener('scroll', onScroll)

    return {
      data,
      isLoading,
      isError,
      isLoadingMore
    }
  }
}
</script>