antdesignpro实现滚动加载分页数据_antdesign 滚动分页-优快云博客

本文链接：https://blog.youkuaiyun.com/lystest/article/details/135150797

本文解析了前端滚动事件触发页面加载，如何在每次请求后端时自动递增页码参数。关键代码展示了如何计算下一页的SQL查询，以及React组件中使用InfiniteScroll实现无限滚动加载的数据获取和处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理解析：每滚动一次相当于翻页，请求后端时给的页码参数要想办法加1，后端才能根据页码给出相应数据

注意后端收到页码参数之后要准确计算出每页的首行数据，关键逻辑代码：

# 根据前端传的页码，进行计算下一页的起始行号
page = (int(params['page'])-1)*10+1
sql = f"SELECT * FROM dong_c_di_comment limit 10 offset {page}"
print(sql)

前端实现部分：

const [loading, setLoading] = useState(false);
const [data, setData] = useState([]);
// 定义传给后端的页码钩子
const [page, setPage] = useState(1);

const loadMoreData = async () => {
  if (loading) {
    return;
  }
  setLoading(true);
  const params = {page:page}
  get_cars(params)
    .then(res => {
      setData([...data, ...res.data]);
      setPage(page + 1);
      setLoading(false);
    })
    .catch(() => {
      setLoading(false);
    });
};

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

return(
  <div
    id="scrollableDiv"
    style={{
      width:"350px",
      height: "900px",
      overflow: 'auto',
      padding: '0 16px',
      border: '1px solid rgba(140, 140, 140, 0.35)',
    }}
  >
    <InfiniteScroll
      dataLength={data.length}
      next={loadMoreData}
      hasMore={data.length < 50}
      loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
      endMessage={<Divider plain>加载完毕, 没有更多数据了哦 🤐</Divider>}
      scrollableTarget="scrollableDiv"
    >
      <List
        dataSource={data}
        renderItem={(item) => {
          // console.log("item1111111",item)
          return (
            <List.Item key={item.commenter_name}>
              <List.Item.Meta
                avatar={<Avatar src={item.avatar_url} />}
                title={<a href="https://ant.design">{item.title}</a>}
                description={item.content}
              />
            </List.Item>
          )
        }
      }
      />
    </InfiniteScroll>
  </div>
)