js_原生js实现上拉加载更多的功能。

 

 

 1                 //--------------上拉加载更多---------------
 2         //获取滚动条当前的位置 
 3         function getScrollTop() {
 4             var scrollTop = 0;
 5             if(document.documentElement && document.documentElement.scrollTop) {
 6                 scrollTop = document.documentElement.scrollTop;
 7             } else if(document.body) {
 8                 scrollTop = document.body.scrollTop;
 9             }
10             return scrollTop;
11         }
12 
13         //获取当前可视范围的高度 
14         function getClientHeight() {
15             var clientHeight = 0;
16             if(document.body.clientHeight && document.documentElement.clientHeight) {
17                 clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
18             } else {
19                 clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
20             }
21             return clientHeight;
22         }
23 
24         //获取文档完整的高度 
25         function getScrollHeight() {
26             return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
27         }
28         
29         //滚动事件触发
30         window.onscroll = function() {
31             if(getScrollTop() + getClientHeight() == getScrollHeight()) {
32                34             }
35         }
36         //-----------------结束--------------------                

原理很简单，代码31行做了一个判断getScrollTop() + getClientHeight() == getScrollHeight()，第一个函数获取滚动条的位置，第二个函数获取当前屏幕可见的高度，第三个函数获取当前文档的总高度，

当前两个参数等等第三个参数的时候，就表示文档已经拉到底部了，触发事件向后台请求数据。这样一个分页功能就写出来了。

这里多提一点，向后台请求数据的时候，需要向后太发送一个参数，第一页就是1，第二页就是2，如此用来区分，我们在后台拿到的数据是相对应的。

 

 

 1                 //--------------上拉加载更多---------------
 2         //获取滚动条当前的位置 
 3         function getScrollTop() {
 4             var scrollTop = 0;
 5             if(document.documentElement && document.documentElement.scrollTop) {
 6                 scrollTop = document.documentElement.scrollTop;
 7             } else if(document.body) {
 8                 scrollTop = document.body.scrollTop;
 9             }
10             return scrollTop;
11         }
12 
13         //获取当前可视范围的高度 
14         function getClientHeight() {
15             var clientHeight = 0;
16             if(document.body.clientHeight && document.documentElement.clientHeight) {
17                 clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
18             } else {
19                 clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
20             }
21             return clientHeight;
22         }
23 
24         //获取文档完整的高度 
25         function getScrollHeight() {
26             return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
27         }
28         
29         //滚动事件触发
30         window.onscroll = function() {
31             if(getScrollTop() + getClientHeight() == getScrollHeight()) {
32                34             }
35         }
36         //-----------------结束--------------------                

原理很简单，代码31行做了一个判断getScrollTop() + getClientHeight() == getScrollHeight()，第一个函数获取滚动条的位置，第二个函数获取当前屏幕可见的高度，第三个函数获取当前文档的总高度，

当前两个参数等等第三个参数的时候，就表示文档已经拉到底部了，触发事件向后台请求数据。这样一个分页功能就写出来了。

这里多提一点，向后台请求数据的时候，需要向后太发送一个参数，第一页就是1，第二页就是2，如此用来区分，我们在后台拿到的数据是相对应的。