滑动底部加载数据与显示动画

滑动底部加载数据与显示动画

今天需要做的一个功能就是当你滑动到屏幕底部时，加载数据的同时也显示一个加载的状态动画

技术栈：Jquery+JavaScript

前面就是获取你滚动条滚动到了什么位置就是你滑动了多长的距离的累加，可视范围的高度就是你窗口的固定距离了，当你滚动的距离加上你当前窗口的大小就等于滑动到底部的距离了

1、jquery之下拉刷新

参考文章:

jquery之移动端下拉刷新，上拉加载更多。

因为你滚动条滚动的距离就是滚动消失的内容加上当前窗口的大小不就等于到达底部的距离嘛这样理解就好了

之后关于加载动画的内容就是我的理解就是当你下拉到最底部的时候一开始有一个隐藏的div，触发加载函数的时候就可以让这个div显示，当你请求数据结束之后的回调函数你就又可以隐藏达到了一个加载动画的效果

//获取滚动条当前的位置
function getScrollTop() {
   
    var scrollTop = 0;
    if (document.documentElement && document.documentElement.scrollTop) {
   
        scrollTop = document.documentElement.scrollTop;
    } else if (document.body) {
   
        scrollTop = document.body.scrollTop;
    }
    return scrollTop;
}

//获取当前可视范围的高度