lacemi_v4/sapi/web/reportForms/js/continuesLoadPage.js

$('#content').append('<div id="content-draw-line" class="content-draw-line none">我是有底线的...</div>');
const pageCount = parseInt($(".get_page_count").html());
let page = parseInt($(".get_page").html());

let isLoadPage = false;
let isCachePage = false;
let isTimeCachePageUp = false;
//监听上下滚动
let loadPageP = 0, loadPageT = 0;
let cachePage = 1;
let cachePageData = [$('#tableContent').html()];

const continuesLoadPage = (function () {
    const loadPageSkip = function () {
        if (isLoadPage) return
        if (page >= pageCount) return
        const tableContentHeight = $('#tableContent').height(); //内容高度
        const content = $("#content");
        const scrollTop = parseInt(content.scrollTop()); //滚动条距离顶部的高度
        const clientHeight = content.height(); //当前可视的页面高度
        if (tableContentHeight - scrollTop < clientHeight * 2) {
            isLoadPage = true;
            let jumpNumber = page + 1;
            alert("JumpPage@" + jumpNumber);
        }
    };

    const showBottomLine = function () {
        if (cachePage === pageCount) {
            $('#content-draw-line').removeClass('none');
        } else {
            $('#content-draw-line').addClass('none');
        }
    }

    const cachePageUp = function () {
        isCachePage = true;
        const oldChildArray = [];
        let height = 0;
        for (let i = -10; i < 0; i++) {
            const child = $('#tableContent tr').eq(i);
            height += child.outerHeight(true)
            oldChildArray.push(child);
        }
        const tableContent = $('#tableContent');
        const content = $('#content');
        tableContent.html('');
        tableContent.append(oldChildArray);
        content.scrollTop(height)
        cachePage++;
        tableContent.append(cachePageData[cachePage - 1]);
        if (typeof (floatTitle) !== "undefined") floatTitle.setFloatTitleMap()
        setTimeout(function () {
            content.scrollTop(height)
            setTimeout(function () {
                isCachePage = false;
            }, 100);
        }, 100);
        showBottomLine();
    }

    const cachePageDown = function () {
        isCachePage = true;
        const tableContent = $('#tableContent');
        const content = $("#content");
        let height = 0;
        for (let i = 0; i < 10; i++) {
            const child = $('#tableContent tr').eq(i);
            height += child.outerHeight(true)
        }
        if ((/iosee/.test(navigator.userAgent)) && window.screen.width === 320) {
            cachePage--;
            tableContent.html(cachePageData[cachePage - 1]);
            content.scrollTop(content.height() * 2)
            setTimeout(function () {
                const loadPageB = tableContent.height() - content.height() - height
                content.scrollTop(loadPageB)
                setTimeout(function () {
                    isCachePage = false;
                }, 500);
            }, 300);
        } else {
            tableContent.html("");
            content.scrollTop(content.height())
            cachePage--;
            tableContent.html(cachePageData[cachePage - 1]);
            setTimeout(function () {
                const loadPageB = tableContent.height() - content.height() - height
                content.scrollTop(loadPageB)
                setTimeout(function () {
                    isCachePage = false;
                }, 100);
            }, 100);
        }
        showBottomLine();
    }

    const setTimeCachePageUp = function () {
        if (!isTimeCachePageUp) return;
        if (cachePageData.length > cachePage) {
            cachePageUp()
        } else {
            setTimeout(function () {
                setTimeCachePageUp()
            }, 300);
        }
    }

    const contentScroll = function () {
        if (isCachePage) return;
        const content = $("#content");
        loadPageP = content.scrollTop();
        if (loadPageT <= loadPageP) {
            const loadPageB = $('#tableContent').height() - content.height()
            if (loadPageP >= loadPageB) {
                isTimeCachePageUp = true;
                setTimeCachePageUp();
            }
            if (cachePageData.length === cachePage) {
                loadPageSkip();
            }
        } else {
            isTimeCachePageUp = false;
            if (loadPageP <= 0) {
                if (cachePage > 1) {
                    cachePageDown();
                }
            }
        }
        setTimeout(function () {
            loadPageT = loadPageP;
        }, 0);
    }
    return {contentScroll};
})();

$("#content").scroll(function () {
    continuesLoadPage.contentScroll();
    if (typeof (floatTitle) !== "undefined") floatTitle.callFloatTitle()
});

function loadPage(data) {
    let pageData = ''
    if (typeof (data) === "string") {
        pageData = data.replace(new RegExp("\\\\\"", "gm"), "\"");
    } else {
        pageData = data.data;
    }
    page++;
    cachePageData[page - 1] = pageData;
    isLoadPage = false;
}

if (typeof (floatTitle) !== "undefined") floatTitle.setFloatTitleMap()