h5頁面列表滾動加載數據

h5列表滾動加載數據很常見，以下分享下今天做的案例：

前言

這個效果實現需要知道三個參數

1. scrollTop  --  滾動條距離頂部的高度
2. scrollHeight -- 當前頁面的總高度(body總高度)
3. clientHeight --  當前可視的頁面高度(設備窗口的高度)

html

<!--加載提示框-->
<div id="loading"></div>

css

#loading {
  height: 32px;
  line-height: 32px;
  text-align: center;
}

js

//狀態標記
var loading = true;
var start = 1;//當前頁
var length = 5;//每頁條數

//列表滾動加載數據
$(window).scroll(function () {
    var scrollTop = $(this).scrollTop();    //滾動條距離頂部的高度
    var scrollHeight = $(document).height();   //當前頁面的總高度
    var clientHeight = $(this).height();    //當前可視的頁面高度
    var totalHeight = parseFloat(clientHeight) + parseFloat(scrollTop);

    if (scrollHeight - totalHeight < 40) {  注：-40 上拉加載更靈敏
        if (!loading) {
            loading = true;
            $('#loading').show();
            $('#loading').text("正在加載...");
            start += 1;

            //加載數據
            loadData(start, length);
        } else {
            return false;
        }
    }
});


function loadData(start, length) {
    $.get(url, {start: start, length: length}, function (result) {
        var dataList = result.resultData.records;
        if (dataList.length > 0) {
            var opthtml = "";
            dataList.forEach((value, index, array) => {
                ///拼接html
                opthtml += ""
            });
            $("#listDiv").append(opthtml)
        } else {
            $('#loading').text("完全加載");
            //延時隱藏
            // setTimeout(() => {
            //     $("#loading").hide();
            // }, 1000)
            return false;
        }
        setTimeout(() => {
            //內容獲取后，隱藏加載提示
            $("#loading").hide();
            loading = false;
        }, 1000)
    });
}