prefacio

La carga de desplazamiento es un escenario comercial que a menudo se encuentra en el front-end. Es principalmente para realizar la carga de listas. Su esencia no es muy diferente de la paginación. Si no hay un requisito especial, se puede usar la paginación en su lugar. Se realizan las siguientes soluciones basado en el rendimiento y el uso integrales.

plan

1. Implementación js nativa

1. Use onScrollEvent para monitorear si el elemento envuelto por el div se ha desplazado hacia abajo e inicie la solicitud nuevamente. ps：ref es la sintaxis de reaccionar, y su propósito es almacenar una variable. Puede usar let para definir una variable para almacenar de forma nativa.

<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. Realizado por 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>

2. Usa componentes de terceros

Se puede implementar utilizando infinite-scrolluna biblioteca de terceros. Vue y react tienen versiones correspondientes de
react: react-infinite-scroll-component
vue:vue-infinite-scroll

3. Lista virtual

Si la página usa js nativo y otras soluciones, aunque se puede lograr el propósito, a medida que la página se desplaza, los elementos DOM de la página aumentarán mucho. En términos de rendimiento integral, se recomienda usar tablas virtuales. Las últimas versiones de antd y element-plus ya admiten tablas virtuales. Esquema de tabla, consulte el método de escritura correspondiente por sí mismo

reaccionar: https://ant.design/components/table-cn#components-table-demo-virtual-list
vue: https://element-plus.org/zh-CN/component/table-v2.html

Las listas y tablas se desplazan hacia abajo para cargar esquemas de datos