Vue 和 React 框架实现滚动缓冲区

Vue 实现

<template>
  <div id="app" @scroll="handleScroll">
    <!-- 页面内容 -->
    <div v-for="item in items" :key="item">{{ item }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      bufferSize: 100,
      isLoading: false,
    };
  },
  methods: {
    handleScroll(event) {
      // 获取滚动元素
      const scrollElement = event.target;
      // 获取当前滚动位置
      const scrollTop = scrollElement.scrollTop;
      // 获取滚动元素的高度
      const scrollHeight = scrollElement.scrollHeight;
      // 获取窗口的高度
      const clientHeight = scrollElement.clientHeight;

      // 计算滚动到底部的距离
      const distanceToBottom = scrollHeight - (scrollTop + clientHeight);

      // 如果距离底部小于缓冲区大小且未在加载中，加载更多内容
      if (distanceToBottom < this.bufferSize &&!this.isLoading) {
        this.isLoading = true;
        // 模拟加载更多数据
        setTimeout(() => {
          for (let i = 0; i < 10; i++) {
            this.items.push(`新数据 ${this.items.length + i}`);
          }
          this.isLoading = false;
        }, 1000);
      }
    },
  },
};
</script>

<style>
#app {
  height: 500px;
  overflow: auto;
}
</style>

在 Vue 示例中：
定义了一个组件，其中包含数据items用于展示列表项，bufferSize表示缓冲区大小，isLoading用于标识是否正在加载数据。
在模板中使用v-for循环渲染items数据。
通过@scroll监听滚动事件，在事件处理函数handleScroll中进行滚动距离的计算和判断。
当满足条件时，设置isLoading为true，模拟异步加载数据（使用setTimeout），加载完成后更新items数据并将isLoading设为false。

React 实现

import React, { useState, useEffect, useRef } from'react';

function App() {
  const [items, setItems] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const bufferSize = 100;
  const containerRef = useRef(null);

  useEffect(() => {
    // 监听滚动事件
    const container = containerRef.current;
    container.addEventListener('scroll', handleScroll);

    // 组件卸载时移除滚动事件监听
    return () => {
      container.removeEventListener('scroll', handleScroll);
    };
  }, []);

  const handleScroll = (event) => {
    const scrollElement = event.target;
    const scrollTop = scrollElement.scrollTop;
    const scrollHeight = scrollElement.scrollHeight;
    const clientHeight = scrollElement.clientHeight;

    const distanceToBottom = scrollHeight - (scrollTop + clientHeight);

    if (distanceToBottom < bufferSize &&!isLoading) {
      setIsLoading(true);
      // 模拟加载更多数据
      setTimeout(() => {
        const newItems = [];
        for (let i = 0; i < 10; i++) {
          newItems.push(`新数据 ${items.length + i}`);
        }
        setItems([...items,...newItems]);
        setIsLoading(false);
      }, 1000);
    }
  };

  return (
    <div ref={containerRef} style={{ height: '500px', overflow: 'auto' }}>
      {items.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </div>
  );
}

export default App;

在 React 示例中：
使用useState钩子定义状态items和isLoading。
使用useRef钩子获取滚动容器的引用。
通过useEffect钩子在组件挂载时添加滚动事件监听，组件卸载时移除监听。
在handleScroll函数中进行滚动距离的计算和加载判断。
当满足条件时，设置isLoading为true，模拟加载数据后更新items状态并将isLoading设为false。

以上就是文章全部内容了，如果喜欢这篇文章的话，还希望三连支持一下，感谢！