ZBLOG

const [rewardsList, setRewardsList] = useState([ { rewardsUrl: $tools.IMG_REWARD_ICON, rewardsName: '花间堂间夜挑战(1/1)', Integral: 300, activeValue: 100, mallVoucher: 200, rewardsDate: '2024-04-16 17:23', }, { rewardsU...

根据您提供的代码,您想要实现下拉加载更多数据的功能。在这里,我为您提供了一个简单的示例来说明如何重新下拉加载数据。

首先,需要定义一个状态变量来跟踪当前加载的页数或数量:

  1. const [page, setPage] = useState(1); // 初始页数为 1

然后,将滚动容器的滚动事件绑定到 handleScroll 函数,并在该函数中处理下拉加载逻辑:

  1. const handleScroll = () => {
  2. const scrollContainerId = props.isTabs ? 'award-scroll' : 'record-scroll'
  3. const scrollContainer = document.getElementById(scrollContainerId)
  4. if (scrollContainer) {
  5. const { scrollTop, clientHeight, scrollHeight } = scrollContainer
  6. // 判断是否接近页面底部
  7. if (scrollTop + clientHeight + 50 > scrollHeight) {
  8. // 加载更多数据的操作
  9. loadMoreData();
  10. }
  11. }
  12. }

接着,定义一个 loadMoreData 函数用于请求并加载更多数据:

  1. const loadMoreData = async () => {
  2. try {
  3. // 发起异步请求获取新数据
  4. const newData = await fetchData(page); // 根据实际情况发送请求并获取新数据
  5. if (!props.isTabs) {
  6. setRewardsList((data) => [...data, ...newData]);
  7. setAwardNum((num) => num + 1);
  8. if (newData.length === 0) {
  9. setIsLodComplete(true);
  10. }
  11. } else {
  12. setAwardList((data) => [...data, ...newData]);
  13. setRecordNum((num) => num + 1);
  14. if (newData.length === 0) {
  15. setIsRecordLete(true);
  16. }
  17. }
  18. setPage((prevPage) => prevPage + 1); // 更新页数
  19. } catch (error) {
  20. console.error('加载更多数据时出错:', error);
  21. }
  22. }

最后,通过 useEffect 将滚动事件绑定到滚动容器,并在组件卸载时解除绑定:

  1. useEffect(() => {
  2. const scrollContainerId = props.isTabs ? 'award-scroll' : 'record-scroll'
  3. const scrollContainer = document.getElementById(scrollContainerId)
  4. if (scrollContainer) {
  5. scrollContainer.addEventListener('scroll', handleScroll)
  6. return () => scrollContainer.removeEventListener('scroll', handleScroll)
  7. }
  8. }, [rewardsList, awardList, props.isTabs])

这样,当滚动容器接近底部时,将会触发 loadMoreData 函数来加载更多数据。每次加载完成后,页数会自动增加,以便请求下一页的数据。

请根据您的实际业务需求和代码结构进行适当调整。希望对您有所帮助!


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=15076

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?