vue上拉加载更多组件

很久没发布文章了，但其实一直在学习写组件，本来想写个跑马灯组件，但是因为css动画会出现卡顿，就算开启GPU加速还是会，暂时还没有什么好的解决方法，所以有解决方法的欢迎指点一下。

我想，工作一段时间的都碰见过上拉加载更多需求，现在这种插件也蛮多的，也很多是把上拉加载下拉刷新结合。但是这些组件都有一个问题，就是下拉到最底部，刷新浏览器，浏览器会记住这个距离，从而触发上拉加载的方法。虽然这个小问题在正常情况下没什么影响，于是自己就研究研究，写了一个上拉加载更多的组件。

要写上拉加载其实还分两种场景，一种是相对window，也就是相对于可视窗口，一种是在一个容器内。大部分使用场景是相对窗口，所以暂时只写了一个相对于window的。

上拉加载原理简单来说就是判断内容是否到达底部。容器自身的高度加上距离顶部的距离就是现在整个页面的高度。整个页面的高度减去可视窗口的高度再减去滚动条移动的距离，当接近0的时候就是到达底部的时候。

明白了这个原理上拉加载就很好实现了。

标签：

<div id="scroll"> <slot></slot></div>

这边使用了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个人笔记 公众号