当前位置：首页 > jquery

jquery下拉刷新

2026-03-16 17:40:29jquery

jQuery下拉刷新实现方法

使用jQuery实现下拉刷新功能通常结合触摸事件或滚动事件监听，以下为常见实现方案：

监听滚动事件判断下拉动作

通过scrollTop属性检测页面是否被下拉到顶部：

$(window).scroll(function() {
    if ($(window).scrollTop() == 0) {
        // 触发刷新逻辑
        location.reload();
    }
});

添加下拉动画效果

结合CSS动画实现视觉反馈：

var $refresh = $('<div class="refresh-loader">下拉刷新</div>');
$('body').prepend($refresh);

$(window).scroll(function() {
    if ($(window).scrollTop() < -50) {
        $refresh.text("释放刷新");
    } else {
        $refresh.text("下拉刷新");
    }
}).on('touchend', function() {
    if ($(window).scrollTop() < -50) {
        $refresh.text("正在刷新...");
        setTimeout(function() {
            location.reload();
        }, 1000);
    }
});

使用第三方插件简化实现

推荐插件方案：

iScroll：支持自定义下拉刷新动画
PullToRefresh.js：轻量级解决方案
jquery-pullrefresh：jQuery专用插件

示例使用PullToRefresh.js：

PullToRefresh.init({
    mainElement: 'body',
    onRefresh: function() {
        location.reload();
    }
});

移动端触摸事件优化

针对移动端需增加触摸事件处理：

var startY;
$('body').on('touchstart', function(e) {
    startY = e.originalEvent.touches[0].pageY;
}).on('touchmove', function(e) {
    var y = e.originalEvent.touches[0].pageY;
    if (y - startY > 50 && $(window).scrollTop() === 0) {
        // 显示刷新控件
    }
});

完整实现示例

包含状态提示的完整代码结构：

$(function() {
    var $refresh = $('<div class="refresh-indicator">↓ 下拉刷新</div>');
    $('body').prepend($refresh);

    var refreshing = false;
    $(document).on('scroll', function() {
        if ($(window).scrollTop() < -50 && !refreshing) {
            $refresh.text("↑ 释放刷新");
        }
    }).on('touchend', function() {
        if ($(window).scrollTop() < -50 && !refreshing) {
            refreshing = true;
            $refresh.text("↻ 正在加载...");

            // 模拟异步加载
            setTimeout(function() {
                $refresh.text("✓ 加载完成");
                setTimeout(function() {
                    $refresh.text("↓ 下拉刷新");
                    refreshing = false;
                }, 1000);
            }, 1500);
        }
    });
});

样式补充建议

对应CSS建议：

.refresh-indicator {
    position: fixed;
    top: -40px;
    left: 0;
    right: 0;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #f5f5f5;
    transition: top 0.3s;
}

注意事项：

jquery下拉刷新