数组切割分页以及滚动加载数据

最新推荐文章于 2025-07-28 22:31:20 发布

Circle_Key

最新推荐文章于 2025-07-28 22:31:20 发布

阅读量173

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/Circle_Key/article/details/137675484

文章介绍了如何使用JavaScript实现数据分页功能，包括`paginate`函数处理数组并按页存储，以及`handleScroll`函数在滚动到底部时动态调整页码并调用相关数据获取方法。

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

  /**
   * 数据分页
   * **/
  const  paginate=(array, pageSize)=> {
    return array.reduce((result, item, index) => {
        const pageIndex = Math.floor(index / pageSize);
        if (!result[pageIndex]) {
            result[pageIndex] = []; // 创建新页
        }
        result[pageIndex].push(item);
        return result;
    }, []);
}

          <!-- <div class="scroll" ref="scrollContainer" @scroll="handleScroll"> -->
  
/**
   * 滚动到底部执行的方法
   * **/
  const handleScroll = () => {
    const container = scrollContainer.value;
    if (container) {
      const { scrollTop, clientHeight, scrollHeight } = container;
      if (scrollTop + clientHeight >= scrollHeight) {
        pageSize.value += 10;
        if (AINum.value == 1) {
          getWrongQuestionSetFn()
        } else {
          getStrengtheningRecordsFn()
        }
      }
    }
};