告别繁琐分页：Vue 3组合式API+Infinite Scroll构建丝滑无限滚动-优快云博客

告别繁琐分页：Vue 3组合式API+Infinite Scroll构建丝滑无限滚动

【免费下载链接】infinite-scroll 📜 Automatically add next page 项目地址: https://gitcode.com/gh_mirrors/infi/infinite-scroll

你是否还在为实现无限滚动功能编写大量重复代码？是否在处理滚动事件监听、数据加载状态管理、边界条件判断时感到力不从心？本文将展示如何通过Vue 3组合式API与Infinite Scroll库，仅需5分钟即可构建生产级无限滚动列表，同时保持代码的可维护性和扩展性。

读完本文你将掌握：

基于Vue 3组合式API封装通用无限滚动逻辑
使用Infinite Scroll处理复杂滚动计算
实现加载状态、错误处理、空数据等边界场景
结合Masonry布局实现瀑布流无限滚动

核心库介绍

Infinite Scroll（无限滚动）是一个轻量级JavaScript库，专注于解决无限滚动场景中的复杂计算问题。它通过监听滚动事件、计算元素位置、管理加载状态等核心功能，简化了无限滚动的实现难度。

主要特性包括：

智能滚动阈值判断，避免频繁触发加载
内置历史记录管理，支持浏览器前进/后退导航
灵活的内容追加机制，兼容各种布局
完善的状态反馈系统，支持加载中、错误、完成等状态

项目核心文件结构：

js/core.js：核心滚动计算与页面加载逻辑
js/scroll-watch.js：滚动事件监听模块
js/page-load.js：页面内容加载处理

环境准备与安装

安装Infinite Scroll

通过npm安装：

npm install infinite-scroll

国内用户推荐使用淘宝npm镜像：

npm install infinite-scroll --registry=https://registry.npmmirror.com

引入国内CDN资源

为确保国内访问速度，推荐使用字节跳动静态资源CDN：

<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/infinite-scroll/4.0.1/infinite-scroll.pkgd.min.js"></script>

Vue 3组合式API封装

创建无限滚动组合式函数

创建useInfiniteScroll.js文件，封装通用无限滚动逻辑：

import { ref, onMounted, onUnmounted, reactive } from 'vue';

export function useInfiniteScroll(containerSelector, options) {
  // 状态管理
  const state = reactive({
    isLoading: false,
    hasError: false,
    isLastPage: false,
    items: [],
    errorMessage: ''
  });

  // 初始化Infinite Scroll实例
  let infScroll;

  // 内容加载处理函数
  const handleLoad = (response, path, items) => {
    state.isLoading = false;
    if (items && items.length > 0) {
      state.items.push(...items);
    } else {
      state.isLastPage = true;
    }
  };

  // 错误处理函数
  const handleError = (error) => {
    state.isLoading = false;
    state.hasError = true;
    state.errorMessage = error.message || '加载失败，请重试';
  };

  onMounted(() => {
    const container = document.querySelector(containerSelector);
    if (!container) return;

    // 初始化Infinite Scroll
    infScroll = new InfiniteScroll(container, {
      path: options.path || '.pagination__next',
      append: options.append || '.post',
      status: '.page-load-status',
      history: false,
      ...options
    });

    // 绑定事件监听
    infScroll.on('request', () => {
      state.isLoading = true;
      state.hasError = false;
    });
    infScroll.on('load', handleLoad);
    infScroll.on('error', handleError);
    infScroll.on('last', () => {
      state.isLastPage = true;
    });
  });

  onUnmounted(() => {
    if (infScroll) {
      infScroll.off('request');
      infScroll.off('load');
      infScroll.off('error');
      infScroll.off('last');
      infScroll.destroy();
    }
  });

  // 手动触发加载下一页
  const loadNextPage = () => {
    if (!state.isLoading && !state.isLastPage && !state.hasError && infScroll) {
      infScroll.loadNextPage();
    }
  };

  return {
    ...toRefs(state),
    loadNextPage
  };
}

组件中使用无限滚动

创建InfiniteList.vue组件，使用上述组合式函数：

<template>
  <div class="infinite-container">
    <div class="item-list" ref="container">
      <div v-for="(item, index) in items" :key="index" class="list-item">
        <!-- 列表项内容 -->
        <h3>{{ item.title }}</h3>
        <p>{{ item.content }}</p>
      </div>
    </div>
    
    <!-- 状态反馈区域 -->
    <div class="page-load-status">
      <div v-if="isLoading" class="loader">加载中...</div>
      <div v-if="hasError" class="error">
        {{ errorMessage }}
        <button @click="loadNextPage">重试</button>
      </div>
      <div v-if="isLastPage" class="end-message">已经到底啦~</div>
    </div>
  </div>
</template>

<script setup>
import { useInfiniteScroll } from './useInfiniteScroll';
import { ref } from 'vue';

const container = ref(null);

// 使用组合式函数
const { 
  items, 
  isLoading, 
  hasError, 
  isLastPage, 
  errorMessage,
  loadNextPage 
} = useInfiniteScroll('.item-list', {
  path: '/api/data?page={{#}}',
  append: '.list-item',
  scrollThreshold: 300
});
</script>

<style scoped>
.item-list {
  min-height: 300px;
}

.list-item {
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.page-load-status {
  text-align: center;
  padding: 20px;
  color: #666;
}

.loader {
  color: #42b983;
}

.error {
  color: #f56c6c;
}

.error button {
  margin-left: 10px;
  padding: 4px 8px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

高级应用：瀑布流布局实现

结合Masonry瀑布流布局，实现图片无限滚动加载。以项目中的sandbox/unsplash-masonry.html为例：

创建瀑布流组件

<template>
  <div class="masonry-container">
    <div class="grid" ref="gridContainer">
      <div class="grid-sizer"></div>
      <div v-for="(item, index) in items" :key="index" class="grid-item">
        <img :src="item.urls.small" :alt="item.alt_description" loading="lazy">
        <p class="caption">Photo by {{ item.user.name }}</p>
      </div>
    </div>
    
    <!-- 加载状态 -->
    <div class="scroll-status">
      <div v-if="isLoading" class="infinite-scroll-request">
        <div class="loader-ellips">
          <span class="loader-ellips__dot"></span>
          <span class="loader-ellips__dot"></span>
          <span class="loader-ellips__dot"></span>
        </div>
      </div>
      <p v-if="isLastPage" class="infinite-scroll-last">已加载全部内容</p>
      <p v-if="hasError" class="infinite-scroll-error">加载失败，请重试</p>
    </div>
  </div>
</template>

<script setup>
import { useInfiniteScroll } from './useInfiniteScroll';
import { onMounted, ref } from 'vue';
import Masonry from 'masonry-layout';

const gridContainer = ref(null);
let masonry;

// 使用无限滚动组合式函数
const { items, isLoading, isLastPage, hasError } = useInfiniteScroll('.grid', {
  path: function() {
    return `/api/photos?page=${this.pageIndex + 1}`;
  },
  append: '.grid-item',
  outlayer: true, // 启用Outlayer布局支持
  scrollThreshold: 400
});

onMounted(() => {
  // 初始化Masonry布局
  masonry = new Masonry(gridContainer.value, {
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    percentPosition: true,
    gutter: 10
  });
});
</script>

<style scoped>
.grid {
  margin: 0 auto;
  max-width: 1200px;
}

.grid-sizer, .grid-item {
  width: 25%;
}

.grid-item img {
  width: 100%;
  display: block;
}

.caption {
  padding: 8px;
  margin: 0;
  background: rgba(0,0,0,0.5);
  color: white;
  font-size: 12px;
}

/* 加载动画 */
.loader-ellips {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 20px;
}

.loader-ellips__dot {
  position: absolute;
  top: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #333;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.loader-ellips__dot:nth-child(1) {
  left: 8px;
  animation: ellips1 0.6s infinite;
}

.loader-ellips__dot:nth-child(2) {
  left: 32px;
  animation: ellips2 0.6s infinite;
}

.loader-ellips__dot:nth-child(3) {
  left: 56px;
  animation: ellips3 0.6s infinite;
}
</style>

常见问题与优化

性能优化策略

图片懒加载：使用原生loading="lazy"属性或Intersection Observer实现图片延迟加载
事件节流：Infinite Scroll内部已实现滚动事件节流，默认阈值为200ms
虚拟滚动：对于超长列表，可结合vue-virtual-scroller实现虚拟滚动

常见问题解决方案

频繁触发加载：调整scrollThreshold参数，增大触发距离
布局抖动：使用固定宽高比例容器，避免内容加载后重排
内存泄漏：确保在组件卸载时调用destroy()方法清理事件监听

总结与扩展

本文介绍了如何使用Vue 3组合式API封装Infinite Scroll库，实现通用的无限滚动功能。通过组合式函数，我们将滚动逻辑与UI组件分离，提高了代码的复用性和可维护性。

核心要点回顾：

使用组合式API封装无限滚动逻辑，实现状态与行为的复用
结合Infinite Scroll处理复杂的滚动计算与内容加载
实现瀑布流布局等高级应用场景
优化性能并解决常见问题

扩展方向：

添加下拉刷新功能
实现列表项动画效果
支持自定义加载模板
开发配套的Vue Devtools插件，可视化调试无限滚动状态

通过这种方式，我们可以快速构建出高性能、用户体验优秀的无限滚动列表，满足各种业务需求。

项目完整代码可通过以下方式获取：

git clone https://gitcode.com/gh_mirrors/infi/infinite-scroll

【免费下载链接】infinite-scroll 📜 Automatically add next page 项目地址: https://gitcode.com/gh_mirrors/infi/infinite-scroll

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考