下拉載入資料
阿新 • • 發佈:2020-09-15
原理:手往上拉的 時候,當拉到距離底部200(一定距離的時候),開始載入資料
clientHeight(可視區高度)+ scrollTop (內容向上滾動的高度)+ 200(距離底部的高度,可變) >= scrollHeight
//=>開始展示第一頁的內容 isRun =false;//開關,是否正在載入資料 queryData();//首次載入資料 //=>下拉載入更多資料 $(window).on('scroll', () => { let { clientHeight, scrollTop, scrollHeight } = document.documentElement; if ((clientHeight + scrollTop + 200) >= scrollHeight) { //=>即將到達頁面底部:載入更多資料 //正在載入中是不允許載入新的資料化的 //如果已經把所有資料都載入完成了,也不再繼續載入了 if (isRun) return; if (page >= pageNum) return; isRun = true;//開啟開關 page++; queryData(); } });