1. 程式人生 > 實用技巧 >下拉載入資料

下拉載入資料

原理:手往上拉的 時候,當拉到距離底部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();
                }
            });