前端开发攻略---模拟后端接口返回数据，教你三种方式实现滚动到底部加载更多数据

bbamx.

已于 2024-04-29 09:08:58 修改

阅读量1.6k

点赞数 13

CC 4.0 BY-SA版权

分类专栏：前端开发攻略文章标签：前端 vue.js javascript

于 2024-04-28 16:24:30 首次发布

本文链接：https://blog.csdn.net/nibabaoo/article/details/138281691

3、方式二：使用原生的Intersection Observer API

1、演示

2、方式一：手动监听滚动事件

原理：

手动监听滚动事件的原理是通过添加滚动事件监听器，当页面滚动时触发相应的回调函数，检测页面是否已经滚动到底部，从而触发加载更多数据的逻辑。

优点：

1、相对简单直接：不需要引入额外的插件或API，只需编写少量代码即可实现滚动加载更多功能。

2、可定制性强：可以根据项目需求灵活地调整滚动加载更多的逻辑，比如添加动画效果、加载提示等。

缺点：

1、性能问题：由于滚动事件触发频率较高，在数据量较大时可能会导致性能问题，需要额外的优化措施来提高性能。

2、兼容性问题：不同浏览器的滚动事件表现可能不尽相同，需要考虑浏览器兼容性。

3、实现复杂度：相比起使用现成的插件或API，手动监听滚动事件需要编写更多的代码。

实现代码：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .loadingText {
        width: 100%;
        text-align: center;
        height: 50px;
        font-size: 50px;
        align-items: center;
      }
      .item {
        font-size: 50px;
        padding: 50px;
        width: 100%;
        background-color: rgb(71, 70, 70);
        text-align: center;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
    <p class="loadingText">正在加载...</p>
  </body>
  <script>
    const container = document.querySelector('.container')
    const loadingText = document.querySelector('.loadingText')

    const body = {
      pageSize: 10,
      pageNum: 1,
    }
    let data = []
    const total = 25
    function getData() {
      let maxNum = body.pageNum * body.pageSize
      let startNum = (body.pageNum - 1) * body.pageSize + 1
      let endNum = maxNum > total ? total : maxNum
      for (let i = startNum; i <= endNum; i++) {
        data.push(i)
      }
      