App.js 的代码

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

import "./styles/scroll.scss";
import './App.scss';

const App = () => {
	const contentRef = useRef({});
	const [content, setContent] = useState([]);
	const [isLoading, setIsLoading] = useState(false);
	const dataCount = 20;

	const getData = () => {
		return new Promise(resolve => {
			setIsLoading(true);

			setTimeout(() => {
				const result = []

				for (let index = 0; index < dataCount; index++) {
					result.push(`数据-${index}-${new Date()}`);
				}

				resolve(result);

				setIsLoading(false);
			}, 300);
		})
	}

	const handleScroll = () => {
		const scrollHeight = contentRef.current.scrollHeight;
		const moveHeight = contentRef.current.scrollTop;
		const viewHeight = contentRef.current.clientHeight;
		const position = content.length * dataCount;

		// console.log({ scrollHeight, moveHeight, viewHeight });

		if (viewHeight + moveHeight >= scrollHeight) {
			console.log('到底');
			init(true);
			contentRef.current.scrollTo(0, position);
		}
	}

	const end = useMemo(() => {
		if(isLoading){
			console.log('当前数据量 ', content.length);
		}
		return isLoading ? <div>假装在转圈...</div> : <div>上拉加载更多数据</div>;
	}, [content.length, isLoading])

	const init = async (isAdding = false) => {
		const datas = await getData()
		let result = datas.map(data => <div key={data} className={'item'} > {data}</div >)

		if (isAdding) {
			result = content.concat(result);
		}

		setContent(result);
	}

	useEffect(() => { init(); }, [])

	return (
		<div className={'wrapper'} >
			<div className={'header'}>header</div>
			<div className={'content'} onScroll={handleScroll} ref={contentRef}>
				{content}
				{end}
			</div>
		</div>
	);
}

export default App;

scss的代码

.wrapper {
  height: 600px;
  padding: 10px 20px;
  border: 1px solid red;
  display: flex;
  flex-direction: column;

  .header {
    height: 100px;
    border: 1px solid green;
  }

  .content {
    flex: 1;
    border: 1px solid blue;
    overflow-y: auto;
  }

  .item {
    height: 50px;
  }
}

疑问

  • 这里能够实时的加载数据。但是在公司里面，加载数据十分诡异。