jquery 页面滚动监听

163 阅读1分钟
<div class="de-list">
    <div class="prolist"></div>
</div>

<script>
//页面滚动执行事件
$('.de-list').scroll(function () {
    loadmore($(this));
});


var page = 1;
var pageSize = 10;
var pages = 0;
var finished = 0;
var sover = 0;

//加载完
function loadover(mark) {
    if (sover == 1) {
       console.log('到底了~~');
    }
}

function loadmore(obj) {
    if (finished == 0 && sover == 0) {
        var scrollTop = $(obj).scrollTop();
        var scrollHeight = $(obj).height();
        var windowHeight = $(obj).children('.prolist').height();
        // 注意相关高度
        if (scrollTop >= (windowHeight - scrollHeight)) {
            //此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作
            //防止未加载完再次执行
            finished = 1;
            page += 1;
            let keyword = $("#search-text").val();
            axiosGet('api/device/findByKeywordList', {
                'keyword': keyword,
                current: page,
                size: pageSize
            }).then(function (response) {
                let result = response.data;
                if (result.errorCode === 200) {
                    let html = ``;
                    pages = result.data.pages;
                    if (result.data.list.lenght == 0) {
                        sover = 1;
                        loadover();
                        return;
                    }
                   
                   result.data.list.forEach((item, index) => {
                         // binding data...
                         html += .... ;
                   });
                    $(".prolist").append(html);
                    finished = 0;
                    //最后一页
                    if (page == pages) {
                        sover = 1;
                    }
                    loadover();
                 }
            });
    } else {
        // loadover
        loadover();
    }
}
</script>