vue3——自己实现数据无限加载功能的封装

---

前言

本文章实现一个触底无限加载的功能，简言之就是当还有数据未加载完毕时，显示正在加载中，全部加载完毕后显示加载已完毕的一个效果。一起来看看如何实现~

---

一、封装的意义

• 数据较多的时候，滑动滚动条显示加载状态，可以给用户很好的体验
• 代码维护性更好
• 代码可复用

二、如何封装？

需要用到@vueuse/core中的useIntersectionObserver，用来判断元素是否出现在可视区
链接：useIntersectionObserver

1. 准备

项目根目录下打开任意终端，执行npm install @vueuse/core@5.3.0，这里安装的固定版本，各位按需选择

因考虑复用组件，故封装为全局组件，老套路src/components下新建infinite-loading.vue文件

代码如下（示例）：

<template>
  <div class="infinite-loading" ref="container">
    <div class="loading" v-if="loading">
      <span class="img"></span>
      <span class="text">正在加载中...</span>
    </div>
    <div class="none" v-if="finished">
      <