js_原生js實現上拉載入更多的功能。
阿新 • • 發佈：2018-11-11
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，如此用來區分，我們在後臺拿到的資料是相對應的。