列表、表格滚动到底部加载数据方案

REX_PERSIST

已于 2023-05-10 19:18:23 修改

阅读量947

点赞数

分类专栏：前端-JavaScript 前端-vue、react 文章标签：前端 javascript vue.js react.js

于 2023-05-06 11:00:47 首次发布

本文链接：https://blog.csdn.net/weixin_53334387/article/details/130521901

版权

前端-JavaScript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端-vue、react

4 篇文章 0 订阅

订阅专栏

文章介绍了前端实现滚动加载数据的三种方案：使用原生js监听滚动事件或IntersectionObserverAPI，以及利用第三方组件如react-infinite-scroll-component和vue-infinite-scroll。还提到了虚拟列表技术以优化性能，如antd和element-plus的虚拟表格支持。

摘要由CSDN通过智能技术生成

前言

滚动加载是前端经常遇到的业务场景，主要是实现列表的加载，其实质跟分页没多大区别，如果不是特别要求，可以使用分页替代，综合性能和用途做以下几种方案。

方案

1、原生js实现

1、通过onScrollEvent监听被div包裹的元素是否滚动到底部了，再次发起请求，ps：ref是react的语法，其目的也就是存储一个变量，原生可以用let定义一个变量存储即可

<div ref={scrollElement} onScrollCapture={onScrollEvent}>
   <Table />
</div>

const onScrollEvent = (e) => {
    /** 解决横向滚动误触发判断 */
    if (e.target.scrollTop === scrollElement.current) return false;
    scrollElement.current = e.target.scrollTop;
    if (e.target.scrollTop === e.target.scrollHeight - e.target.clientHeight) {
      // setTableLoading(true);

      // console.log('我到底了，重新请求数据');
      setTimeout(() => {
        // setTableLoading(false);
      }, 100);
    }
  };

2、通过IntersectionObserver实现

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>滚动加载示例</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }

      .container {
        display: flex;
        flex-wrap: wrap;
        margin: 20px;
      }

      .item {
        flex-basis: 200px;
        height: 200px;
        margin: 10px;
        text-align: center;
        background-color: #f2f2f2;
        font-size: 36px;
        line-height: 200px;
      }

      .loading {
        height: 50px;
        text-align: center;
        font-size: 24px;
        color: #999;
        margin-bottom: 20px;
      }

      ::-webkit-scrollbar {
        width: 6px;
      }

      ::-webkit-scrollbar-thumb {
        border-radius: 3px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background-color: rgba(0, 0, 0, 0.2);
      }

      ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 3px;
        background-color: #f2f2f2;
      }
    </style>
  </head>

  <body>
    <div class="container"></div>
    <div class="loading">加载中...</div>
    <script>
      // 初始化数据
      const data = [];
      for (let i = 1; i <= 20; i++) {
        data.push(i);
      }

      // 创建 IntersectionObserver 实例
      const observer = new IntersectionObserver(
        (entries) => {
          // 遍历所有进入视口的元素
          entries.forEach((entry) => {
            // 如果元素是 loading 元素，且进入了视口，则执行加载更多数据的回调函数
            if (
              entry.target === document.querySelector(".loading") &&
              entry.isIntersecting
            ) {
              loadMore();
            }
          });
        },
        {
          root: null, // 使用浏览器视口作为根元素
          rootMargin: "0px", // 不设置边距
          threshold: 1.0, // 只有当目标元素全部进入视口时触发回调函数
        }
      );

      // 页面加载完毕后，先加载前面的数据
      window.onload = () => {
        const container = document.querySelector(".container");
        data.forEach((item) => {
          const el = document.createElement("div");
          el.className = "item";
          el.textContent = item;
          container.appendChild(el);
        });

        // 开始监听 loading 元素
        observer.observe(document.querySelector(".loading"));
      };

      // 加载更多数据的回调函数
      function loadMore() {
        // 模拟异步请求数据
        const newData = [];
        for (let i = 1; i <= 10; i++) {
          newData.push(data.length + i);
        }
        // 将新数据添加到页面中
        const container = document.querySelector(".container");
        newData.forEach((item) => {
          const el = document.createElement("div");
          el.className = "item";
          el.textContent = item;
          container.appendChild(el);
        });

        // 如果数据已经加载完毕，则取消监听 loading 元素
        if (data.length >= 50) {
          observer.unobserve(document.querySelector(".loading"));
          document.querySelector(".loading").textContent = "已加载全部数据";
        } else {
          data.push(...newData);
        }
      }
    </script>
  </body>
</html>