【實戰技能】JS實現上拉加載更多,瀏覽至靠近底部,發送請求進行數據加載

   1,屏幕滾動監聽事件,監聽滾動至底部;

   2,改變狀態值,防止重複加載,進行加載數據,進行填充;

   3,數據會做分頁請求加載,注意好分頁數和數據量的設置;

    var loadStatus = true;
    var commentPage = 1;

    window.onscroll = function () {
        if (loadStatus) {
            if (($(document).scrollTop()) >= ($(document).height() - $(window).height()) - 200) {
                loadStatus = false;
                commentPage++;
                $.ajax({
                    type: 'get',
                    dataType: 'json',
                    url: '。。。',
                    success: function (ajaxData) {
                        if (ajaxData.status) {
                            console.log(ajaxData);
                            var paramsArr = ajaxData.data;
                            var html = '';
                            
                            。。。。。

                            $(".scrollspy-body").append(html);
                            loadStatus = true;
                        }
                        else{
                            var html = "<p class='noMore'>--- 我也是有底線的 ---</p>"
                            $(".scrollspy-body").append(html);
                            loadStatus = false;
                        }
                    }
                })
            }
        }
    }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章