功能：下拉到底部加载数据
import React, { useEffect, useRef, useState } from 'react';
import { Scrollbars } from 'react-custom-scrollbars';
const Index = () => {
const scrollbarsRef = useRef(null);
// 模拟数据
const [dataList, setDataList] = useState<string[]>([]);
useEffect(() => {
if(dataList.length === 0){
let arr = [];
for (let index = 0; index < 100; index++) {
arr.push('测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试')
};
setDataList([...arr]);
};
},[]);
/**
* 滚动事件 监听滚动
*/
const handleScroll = () => {
const { scrollTop, scrollHeight, clientHeight } = scrollbarsRef.current.getValues();
if (scrollHeight - scrollTop === clientHeight) {
console.log("已滚动到底部");
}
};
return (
<div>
<Scrollbars onScroll={handleScroll} autoHeightMin={'186px'} autoHide autoHeight ref={scrollbarsRef}>
{
dataList.map((item: string, index: number) => {
return (
<div key={index}>{index}:{item}</div>
)
})
}
</Scrollbars>
</div>
);
}
export default Index;
