// ts写法
// 分页是20,滚动过程中自动分页调接口返回数据
class Demo extends React.Component<ThemeColorState & UserState, State> {
/** 定时器 */
timer: any = null;
/** 滚动的dom */
scrollDom: any = null;
state: State = {
scrollTop: 0,
pagination: {
total: 0,
current: 1,
pageSize: 20,
size: "small",
pageSizeOptions: ["10", "15", "30", "45"],
defaultCurrent: 1,
},
dataSource: {
total: 0,
totalArea: 0,
rows: [],
},
};
};
componentDidMount(): void {
this.loadDetailsApproval();
}
componentWillUnmount() {
if (this.timer) {
clearInterval(this.timer);
cancelAnimationFrame(this.timer);
}
}
/** 查询审批情况详情 */
loadDetailsApproval = async () => {
const { pagination, search, tbaleOrder, tableField, currentTFarmLandId } = this.state;
const totalPage = Math.ceil(pagination.total / pagination.pageSize);
if (pagination.current > totalPage && pagination.current !== 1) {
return;
}
const data = await TLandsProvider.getITableData({
pageNum: pagination.current, pageSize: pagination.pageSize, orderByColumn: tableField,
isAsc: tbaleOrder, name: search, farmLandId: currentTFarmLandId,
}).catch(err => { message.error("审批情况获取失败!"); return null; });
if (data && data.total > 0) {
const rows = [...this.state.dataSource.rows, ...data.rows];
const newRecords = rows.map((item: any, index: number) => ({
...item,
key: index + 1,
}));
this.setState({
dataSource: { ...data, rows: newRecords },
pagination: { ...pagination, total: data.total },
}, () => {
if (pagination.current === 1) {
this.timer = requestAnimationFrame(this.initialScroll);
}
});
} else {
if (this.timer) {
cancelAnimationFrame(this.timer);
}
}
}
/** 分页变化触发事件 */
paginationChange = (page: number) => {
this.setState(
{
pagination: {
...this.state.pagination,
current: page,
},
}, this.loadDetailsApproval,
);
}
/** 滚动 */
initialScroll = () => {
const { pagination, scrollTop } = this.state;
const { current } = this.state.pagination;
const dom = document.getElementsByClassName("ant-table-body")[0];
const totalPage = Math.ceil(pagination.total / pagination.pageSize);
dom.scrollTop += 1;
// console.log("dddddd", Math.floor(dom.scrollTop) + dom.clientHeight, dom.scrollHeight);
// 在滚动到离底部10像素的地方,翻页加载
if (Math.floor(dom.scrollTop) + dom.clientHeight >= dom.scrollHeight - 10 && Math.floor(dom.scrollTop) + dom.clientHeight <= dom.scrollHeight) {
if (scrollTop === 0) {
this.setState({
scrollTop: dom.scrollTop,
});
if (pagination.current >= totalPage) {
dom.scrollTop = 0;
cancelAnimationFrame(this.timer);
// this.paginationChange(1);
} else {
this.paginationChange(current + 1);
}
}
} else {
this.setState({
scrollTop: 0,
});
}
this.timer = requestAnimationFrame(this.initialScroll);
}
render(){
<div
className="bottom-con"
onMouseEnter={() => { if (this.timer) cancelAnimationFrame(this.timer); }}
onMouseLeave={() => { if (this.timer) cancelAnimationFrame(this.timer); this.timer = requestAnimationFrame(this.initialScroll); }}
>
<Table
columns={columns}
dataSource={dataSource?.rows}
pagination={false}
scroll={{ y: "calc(100% - 50px)" }}
/>
</div>
}