You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
2.7 KiB
60 lines
2.7 KiB
3 years ago
|
![[纯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 {} = wino
|
||
|
|
window.pageYOffset + window.innerHeight >= document.documentElement.scrollHeight
|
||
|
|
```
|
||
|
|
|
||
|
|
如果判断结果为真，就向后端请求更多数据，再使用push方法添加新请求返回的数据
|
||
|
|
|
||
|
|
## 实现过程
|
||
|
|
|
||
|
|
实现每次下拉都返回不同的数据，就要对内容进行分页，根据页数返回不同的数据，但是这个项目并没有后端，后端返回的数据用的是Mock.js模拟的，问题来了Mock.mock在拦截GET请求的时候是无法拦截到url后面带的参数，这样一来就没法在Mock.js对传入的参数进行判断,这时候有两种解决思路，一种是数据分6页就写6个Mock.mock分别拦截不同的页数，使用这种方法的代码会很冗余，还有一种是uncleLian大佬的实现方法：使用for循环让Mock.mock拦截不同的页数
|
||
|
|
<!--more-->
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
for (let Page = 1; Page <= 6; Page++) {
|
||
|
|
let params = {
|
||
|
|
'data': []
|
||
|
|
}
|
||
|
|
Mock.mock(`${baseURL}/list?Page=${Page}`, function () {
|
||
|
|
return params
|
||
|
|
})
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
这样一来就实现了Mock.js对GET请求参数的模拟，光是这样还不行，需要对mock模拟的数据进行拆分，根据页数的不同返回的内容也不同，这里用到了JS的slice方法对数据拆成了6份
|
||
|
|
|
||
|
|
```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下拉加载的功能就完成了。
|
||
|
|
|
||
|
|
~~果然使用插件会更方便一些~~
|