Obsidian_Note/随时随地/纯JS实现下拉加载.md

![[纯JS实现下拉加载.jpg]]

## 写在前面

>最近在深入学习Vue框架，想试着模仿[echo回声](https://www.app-echo.com/ "echo回声")的移动端网页写一个网页出来，参考了 uncleLian 大佬的[vue2-echo](https://github.com/uncleLian/vue2-echo "uncleLian/vue2-echo")的一些实现。在这之中遇到了一个问题：uncleLian大佬使用Mint UI组件库来实现页面的下拉加载更多功能，但是我的项目并没有使用Mint UI，所以自然这个功能我就没法直接使用，没有就没有吧，大不了自己动手写，于是就有了这么一篇文章。

## 实现思路

实现的思路很简单，就是判断 滚动高度 + 可视高度 是否大于文档高度

```javascript
const { pageYOffset, innerHeight } = window
pageYOffset + innerHeight >= document.documentElement.scrollHeight
```

如果判断结果为真，就向后端请求更多数据，再使用push方法添加新请求返回的数据

## 实现过程

实现每次下拉都返回不同的数据，就要对内容进行分页，根据页数返回不同的数据，但是这个项目并没有后端，后端返回的数据用的是 Mock.js 模拟，那么问题来了 Mock.mock 在拦截 GET 请求的时候是无法拦截到 url 后面带的参数的，这样一来就没法在 Mock.js 对传入的参数进行判断，这时候有两种解决思路，一种是数据分6页就写6个 Mock.mock 分别拦截不同的页数，使用这种方法的代码会很冗余，还有一种是 uncleLian 大佬的实现方法：使用 for 循环一次生成 6个 Mock.mock 拦截不同的页数

```javascript
for (let Page = 1; Page <= 6; Page++) {
  let params = {
    'data': []
  }
  Mock.mock(`${baseURL}/list?Page=${Page}`, function () {
    return params
  })
}
```

这样一来就实现了 Mock.js 对 GET 请求分页参数的模拟，光是这样还不行，需要对mock模拟的数据进行拆分，根据页数的不同返回的内容也不同，这里用到了array.prototype.slice() 方法对数据进行拆分

```javascript
for (let Page = 1; Page <= 6; Page++) {
  let params = {
    'data': []
  }
  Mock.mock(`${baseURL}/list?Page=${Page}`, function () {
    params.data = listJson.slice((Page - 1) * 6, Page * 6)
    return params
  })
}
```

获取到了返回的分页数据，下一步就是要把数据给渲染出来，这里直接使用 push(params) 添加数据是不行的，因为params是一个数组，这里需要用到JS的展开运算

```javascript
this.MusicListJson.push(...params);
```

这样就完成了请求数据的添加操作

## 最后

解决了实际代码编写时可能遇到的一些难点，剩下的就是添加页数控制，事件触发之类的操作，这样无插件实现JS下拉加载的功能就完成了。

~~果然使用插件会更方便一些~~