View the source code of the relevant project, stamp here

PS: Don’t be alarmed if you go in and find no relevant code block. I may not have uploaded it to GITHU yet

In the use of the scroll bar to send related requests encountered a very serious problem, in the scroll bar will be a one-time request for multiple data, the logic should be the initialization page, scroll to the specified position after the request for the second page, but it happened that the direct one-time request 2, 3, 4, 5… Page contents.

Under the statement ①, the code only completes a certain function point, and perhaps you have a better solution, despite the comments.

code

var dataids = [];  // De-reuse list data, no longer render if the data ID is in the list
var ajax_sign = true;  // AJAX request stop button, at which point you need the back end to pass a field whether to end the page
var page = 1;  // Initial page number
var request_sign = true;  // Set the lock to false at request time and to true at end
var scrollHeight_sign = 0;  // The height of the current scroll bar

function ajax(params) {
    okUtils.ajax('URL'.'get', params).done(function (response) {
        if (response.next === null || response.next === ' ') {
            // End of the page
            ajax_sign = false;
        }
        if (response.data.length === 0) {
            // Empty data prompt
            document.getElementsByClassName('layui-none') [0].setAttribute('style'.'display: block; ');
            return;
        } else {
            document.getElementsByClassName('layui-none') [0].removeAttribute('style');
        }
        // Render function
        inner(response);
    }).fail(function (error) {
        console.log(error);
        ajax_sign = false;
    });
}

document.onscroll = function () {
    if (request_sign === true && ajax_sign === true) {
        request_sign = false;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
            clientHeight = document.documentElement.clientHeight || document.body.clientHeight,
            scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight

        if (scrollHeight - scrollTop - clientHeight <= 500&& scrollHeight_sign ! == scrollHeight) { page +=1;
            scrollHeight_sign = scrollHeight;
            ajax({'page': page, 'search': document.getElementById('search').value});
            setTimeout(function () {
                request_sign = true;
            }, 2000);
        } else {
            request_sign = true; }}}Copy the code

Note that the 500 data in document.onscroll below refers to the function triggered when the remaining height is less than 500. Note that the setTimeout function is to prevent the data delay under multiple requests.

It uses a lot of metrics to decide whether or not to execute a function, which is quite redundant, but these are the metrics I have to use in my development, which are a little rough, but achieve the desired effect.

Code snippets may make you confused with the logic, so check the source file for your understanding.

The source file will be released to GITBUH on 2020-10-17.