触底加载列表的数据,显示先从第二页开始了,怎么改成从第一页的数据开始显示
时间: 2024-02-11 12:06:48 浏览: 119
Vue下滚动到页面底部无限加载数据的示例代码
要让触底加载列表从第一页开始显示数据,你需要在获取数据时将页码重置为1。具体的做法取决于你使用的是哪种数据源和列表组件。
如果你使用的是像 Ant Design 的 Table 组件,可以通过设置 `pagination.current` 属性为1来实现:
```jsx
import { Table } from 'antd';
function MyTable({ data, loading, onLoadMore }) {
const [pagination, setPagination] = useState({ current: 1, pageSize: 10 });
const handleLoadMore = () => {
// 加载下一页数据,并更新 pagination
onLoadMore({ page: pagination.current + 1 }).then((newData) => {
setPagination((prev) => ({
...prev,
current: prev.current + 1,
total: newData.total,
}));
});
};
return (
<Table
dataSource={data}
loading={loading}
pagination={pagination}
onRow={(record) => ({
onClick: () => console.log(record),
})}
onRowClick={() => {}}
onHeaderRow={() => {}}
scroll={{ y: 400 }}
rowKey="id"
loadMore={handleLoadMore}
/>
);
}
```
如果你使用的是像 React-Virtualized 的 List 组件,则需要在加载数据时将 `startIndex` 和 `stopIndex` 重置为0,同时也要将列表滚动到顶部:
```jsx
import { List } from 'react-virtualized';
function MyList({ data, loading, onLoadMore }) {
const [startIndex, setStartIndex] = useState(0);
const [stopIndex, setStopIndex] = useState(9);
const handleLoadMore = () => {
// 加载下一页数据,并更新 startIndex 和 stopIndex
onLoadMore({ page: Math.floor(stopIndex / 10) + 1 }).then((newData) => {
setStartIndex(stopIndex + 1);
setStopIndex(stopIndex + newData.length);
});
};
const scrollToTop = () => {
listRef.current.scrollToPosition(0);
};
const renderRow = ({ index, key, style }) => {
const item = data[index];
return (
<div key={key} style={style}>
{item.name}
</div>
);
};
return (
<>
<button onClick={scrollToTop}>返回顶部</button>
<List
ref={listRef}
rowCount={data.length}
rowHeight={30}
rowRenderer={renderRow}
scrollToAlignment="start"
scrollToIndex={startIndex}
height={400}
width={300}
onScroll={handleScroll}
/>
{loading && <div>加载中...</div>}
{!loading && <button onClick={handleLoadMore}>加载更多</button>}
</>
);
}
```
阅读全文