很久没发布文章了，但其实一直在学习写组件，本来想写个跑马灯组件，但是因为css动画会出现卡顿，就算开启GPU加速还是会，暂时还没有什么好的解决方法，所以有解决方法的欢迎指点一下。
我想，工作一段时间的都碰见过上拉加载更多需求，现在这种插件也蛮多的，也很多是把上拉加载下拉刷新结合。但是这些组件都有一个问题，就是下拉到最底部，刷新浏览器，浏览器会记住这个距离，从而触发上拉加载的方法。虽然这个小问题在正常情况下没什么影响，于是自己就研究研究，写了一个上拉加载更多的组件。
要写上拉加载其实还分两种场景，一种是相对window，也就是相对于可视窗口，一种是在一个容器内。大部分使用场景是相对窗口，所以暂时只写了一个相对于window的。
上拉加载原理简单来说就是判断内容是否到达底部。容器自身的高度加上距离顶部的距离就是现在整个页面的高度。整个页面的高度减去可视窗口的高度再减去滚动条移动的距离，当接近0的时候就是到达底部的时候。
明白了这个原理上拉加载就很好实现了。
标签：
这边使用了vue的slot插槽。
data：
windowHeight: ‘’,contentOffSetHeight: ‘’,downT: ‘’
因为可视窗口和距离顶部的距离是不会变的，所以初始化的时候就赋值，downT是监听滚动防抖用的。
Props：
props: [‘up’, ‘bottomDistance’],
up对应的就是父组件传递的到达底部是触发的方法，'bottomDistance’是可以设置到达底部距离多少的时候触发加载更多的方法。
Mounted：
if (history.scrollRestoration) {
history.scrollRestoration = 'manual';
};
this.windowHeight = document.documentElement.clientHeight || document.body.clientHeight;//可视窗口高度
this.contentOffSetHeight = document.getElementById('scroll').offsetTop;//容器距离顶部高度
window.addEventListener('scroll', this.onScroll);
这边可视窗口采用了兼容的写法，然后history.scrollRestoration这个可以去了解一下，就是不记住滚动的距离，刷新的时候就不会直接触发加载方法。然后监听window滚动。
onScroll()
{
if (this.downTime) {
clearTimeout(this.downTime);
};
this.downTime = setTimeout(() = > {
let contentHeight = document.getElementById('scroll').clientHeight;//容器高度
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//窗口滚动条高度
if (contentHeight + this.contentOffSetHeight - this.windowHeight - scrollTop <= (this.bottomDistance || 0)) { //加载更多操作
this.$emit('up')
}
}, 200);
}
加上了节流，bottomDistance不穿默认为0，然后节流设置了200毫秒。
最后beforeDestroy：
window.scrollTo(0, 0);window.removeEventListener(‘scroll’, this.onScroll)
刷新当前页面或者离开页面的时候移动到最顶部，防止记住滚动条位置，亲测，要是没有设置history.scrollRestoration，vue生命周期会先移动到顶部然后再移动到记住的位置。其实设置了这个移动到顶部也不需要，这边为了稳定就加上了。还有就是要移除监听滚动，我试了，跟定时间计时器一样，没有在组件销毁的时候移除，会一直存在。
要说的是，这边没有写加载更多的动画效果，使用的时候可以自定义一个然后隐藏，在触发加载更多的时候显示，加载完之后隐藏，包括已经到底部，都可以自定义。虽然会稍显麻烦，主要是考虑到我写的估计很多人会不喜欢。
这样看会比较不直观，所以推荐去npm下载一下：
https://www.npmjs.com/package/wade-ui
欢迎关注Coding个人笔记 公众号