工作-触底刷新

背景

刚刚做了一个需求，其中一个小功能是H5页面触底刷新的功能，因为直接接触小程序最多，直接用小程序API简直不要太好用，所以冷不丁不知道该去如何实现这个功能，一顿百度+翻一些成熟组件库，最后还是不知如何实现😂。

但是我不能放弃啊！！！（毕竟只有我自己一个前端，我觉得这个机会也很好，俗话说靠人不如靠自己！！）

仅凭着稀有的记忆，费劲吧啦想起一些关于当前可视区高度等等。最后跋山涉水可算实现了这个功能，借此机会，趁热乎，来整理下这里的相关知识点。

PS：以我现在的认知，我觉得一般都是借用这两种加载方式来实现分页请求数据的场景吧。

上拉刷新

上拉刷新在一些成熟的组件库中就有，再次我就不一一罗列出来了。

比如vant移动端组件库

实现原理：后续有时间我在补充。毕竟成熟组件在这里（还是懒癌），所以我没有耗费过多时间在这个上面。

触底刷新

先来瞅瞅下面代码

// 获取浏览器窗口的可视区域的宽度
function getViewPortWidth() {
    return document.documentElement.clientWidth || document.body.clientWidth;
}

// 获取浏览器窗口的可视区域的高度
function getViewPortHeight() {
    return document.documentElement.clientHeight || document.body.clientHeight;
}

// 获取浏览器窗口水平滚动条的位置
function getScrollLeft() {
    return document.documentElement.scrollLeft || document.body.scrollLeft;
}

// 获取浏览器窗口垂直滚动条的位置
function getScrollTop() {
    return document.documentElement.scrollTop || document.body.scrollTop;
}

触底原理：滚动高度+可视区域 >= 页面高度，根据这个判断条件，在这里做一些触底之后要触发的一些事情。

	// 垂直滚动条的位置
let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop,
	// 视口实际高度
    curHeight = document.documentElement.clientHeight,
    // 文档实际高度
    pageHeight = document.documentElement.scrollHeight;

然后通过监听滚动事件，来执行触底之后需要执行的事件。

window.addEventListener('scroll', this.listenScroll);

但是要记得销毁，因为我是vue，所以要在实例销毁的时候，去移除这个监听

destroyed() {
    window.removeEventListener('scroll', this.listenScroll);
  },

到这里，基本你想实现的触底刷新就可以实现了。

但是此时，我遇到了一个新问题。。我这个需求还有另外一个场景，当切换月份的时候，正常返回的数据为空，但是我的页面还停留在上一个月份的数据，并且新请求的接口pageNum也为上一次请求的pageNum，讲道理，这时的pageNum应该为1才对。

所以我又在切换月份的回调函数中重新改了pageNum为1，这时接口请求参数的问题解决了，可是为什么页面的数据没有变化呢？

因为切换月份返回的数据也为空，所以在当前数据后面拼接上一个空数组，没毛病啊兄弟！

我的解决办法是：
在切换月份的回调函数中，把数组置为空，这样再次请求的数据就根据返回的数据去展示就好了。

总结

本次心路历程，解决实现出来了很爽。通过这次也总结出来一个事情，就是后续有开发，多想想，滤清楚逻辑在开发，因为这个是嵌套在原生中的H5页面，并且接口也会校验登录相关，所以以后我在直接写代码之前，应该多想想，再动手敲，而不是边敲代码，边捋逻辑。如果可以，前提是可以，我觉得也可以写了小触底刷新的组件练练手。如有不对的地方希望指出，本人会虚心学习并改正！

愿我在前端路上越走越远～哈哈哈哈