Vue 四行代码实现无感知上拉加载更多

话不多说，直接上代码：

//可滚动容器的高度
let innerHeight = document.querySelector('#app').clientHeight;
//屏幕尺寸高度
let outerHeight = document.documentElement.clientHeight;
//可滚动容器超出当前窗口显示范围的高度
let scrollTop = document.documentElement.scrollTop;
if (innerHeight < (outerHeight + scrollTop)) {
    //加载更多操作
    console.log("loadmore");
}

就这几行代码也没什么可说的，每个值在注释里面写的很清楚。

接下来，从一张GIF图中来探寻上述几行代码是如何实现无感知上拉加载的：

console中分别打印的是可滚动容器的高度innerHeight、屏幕尺寸的高度outerHeight、可滚动容器超出当前窗口显示范围的高度scrollTop。可以看到我选择的模拟器是iPhone5，屏幕高度568，这个值无论怎么滚动，都不会变。而scrollTop会随着滚动而增加，当滚动的底部无法再往下滚动时，这个数值停止增加，此时，innerHeight < (outerHeight + scrollTop)，我们就可以使用这个条件进行上拉加载的操作了。
最后，献上完整代码（粘贴复制就能看到效果）：

    
    
    
    
    



    

        
item{{ index }}