当前位置：首页 > jquery

jquery上拉加载

2026-03-16 22:47:13jquery

实现 jQuery 上拉加载的方法

监听滚动事件
通过监听滚动事件判断是否滚动到页面底部。当滚动接近底部时触发加载数据的函数。

$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
        loadMoreData();
    }
});

加载数据函数
定义一个异步函数用于加载更多数据，通常通过 AJAX 请求获取数据并追加到页面中。

function loadMoreData() {
    if (isLoading) return; // 防止重复加载
    isLoading = true;
    $('#loading').show(); // 显示加载动画

    $.ajax({
        url: 'your-api-url',
        type: 'GET',
        data: { page: nextPage },
        success: function(response) {
            if (response.data.length > 0) {
                appendData(response.data);
                nextPage++;
            } else {
                $('#no-more-data').show(); // 显示无更多数据提示
            }
        },
        complete: function() {
            isLoading = false;
            $('#loading').hide();
        }
    });
}

数据追加与初始化
将新数据动态添加到页面容器中，并初始化页面状态。

function appendData(data) {
    var html = '';
    data.forEach(function(item) {
        html += '<div class="item">' + item.content + '</div>';
    });
    $('#container').append(html);
}

var nextPage = 1;
var isLoading = false;

优化与注意事项

节流处理
滚动事件可能频繁触发，需使用节流函数（如 _.throttle）减少性能消耗。

$(window).scroll(_.throttle(function() {
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
        loadMoreData();
    }
}, 300));

无更多数据提示
当数据全部加载完毕时，隐藏加载动画并显示提示信息。

<div id="loading" style="display:none;">加载中...</div>
<div id="no-more-data" style="display:none;">没有更多数据了</div>

兼容移动端
移动端需额外处理触摸事件，确保触控滑动也能触发加载逻辑。可通过检测 scrollTop 和容器高度实现。

jquery上拉加载

$(document).on('touchmove', function() {
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 50) {
        loadMoreData();
    }
});