基于 Vue 3 实现无限滚动翻页组件

简介

无限滚动是现代网页应用中常见的交互模式，用户在滚动到页面底部时自动加载更多内容。今天我们将使用 Vue 3 的组合式 API 来实现一个可复用的无限滚动组件。

核心功能

监听滚动事件
判断是否滚动到底部
触发加载更多数据
支持加载状态显示
支持错误处理

代码实现

1. 组件结构

首先创建一个 InfiniteScroll.vue 文件：

vue:src/components/InfiniteScroll.vue 复制代码

<template>
  <div class="infinite-scroll-container" ref="containerRef">
    <slot></slot>
    <div class="loading-status">
      <div v-if="loading" class="loading">加载中...</div>
      <div v-if="error" class="error">{{ error }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  distance: {
    type: Number,
    default: 100
  }
})

const emit = defineEmits(['load-more'])

const containerRef = ref(null)
const loading = ref(false)
const error = ref(null)

// 检查是否滚动到底部
const isBottom = () => {
  const container = containerRef.value
  return container.scrollHeight - container.scrollTop - container.clientHeight < props.distance
}

// 处理滚动事件
const handleScroll = async () => {
  if (loading.value || error.value) return
  
  if (isBottom()) {
    try {
      loading.value = true
      await emit('load-more')
      loading.value = false
      error.value = null
    } catch (err) {
      error.value = err.message
      loading.value = false
    }
  }
}

onMounted(() => {
  containerRef.value.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  containerRef.value.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
.infinite-scroll-container {
  height: 100%;
  overflow-y: auto;
}

.loading-status {
  padding: 1rem;
  text-align: center;
}

.loading {
  color: #666;
}

.error {
  color: #ff4444;
}
</style>

2. 使用示例

vue:src/App.vue 复制代码

<template>
  <div class="app">
    <infinite-scroll @load-more="loadMore">
      <div v-for="item in items" :key="item.id" class="item">
        {{ item.content }}
      </div>
    </infinite-scroll>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import InfiniteScroll from './components/InfiniteScroll.vue'

const items = ref([])
const page = ref(1)

const loadMore = async () => {
  // 模拟 API 请求
  const newItems = await fetchData(page.value)
  items.value.push(...newItems)
  page.value++
}

// 模拟数据获取
const fetchData = (page) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(Array.from({ length: 10 }, (_, i) => ({
        id: page * 10 + i,
        content: `Item ${page * 10 + i}`
      })))
    }, 1000)
  })
}
</script>

<style>
.app {
  height: 100vh;
}

.item {
  padding: 20px;
  border-bottom: 1px solid #eee;
}
</style>

关键实现细节

1. 滚动检测

使用 scrollHeight、scrollTop 和 clientHeight 来判断是否滚动到底部：

scrollHeight: 内容总高度
scrollTop: 已滚动距离
clientHeight: 可视区域高度

2. 防抖处理

在实际应用中，建议对 handleScroll 函数进行防抖处理，避免频繁触发：

javascript 复制代码

import { debounce } from 'lodash'

const handleScroll = debounce(async () => {
  // 滚动处理逻辑
}, 200)

3. 错误处理

组件内置了简单的错误处理机制，当加载失败时会显示错误信息，并暂停后续加载。

组件特点

使用 Vue 3 组合式 API，代码更清晰
支持自定义触发距离
内置加载状态和错误处理
可通过插槽自定义内容

使用注意事项

确保父容器设置了固定高度
合理设置触发距离（distance）
处理好数据加载的异常情况
考虑是否需要添加数据加载完成的判断

总结

这个无限滚动组件封装了常用的滚动加载功能，可以方便地集成到各种列表场景中。通过 Vue 3 的组合式 API，我们能够更清晰地组织代码逻辑，提供更好的可维护性。