javascript - 如何使用 jQuery Mobile 或 Javascript 在 Web 应用程序上进行下拉页面刷新

Question

我正在开发一个简单的 Web 应用程序，我想让用户能够使用下拉刷新工具(如 Android 或 iOs)来刷新页面。

刷新只会导致重新加载页面，没有别的:

location.reload();

我想使用 jQuery Mobile 或 Javascript。

Answer 1

jsfiddle DEMO

这是在 body 上，但您当然可以在其他元素中使用它。在此示例中，html 和 body 具有 100% height 和不同的 background-color，因此您会注意到 body 往下拖的时候。鼠标向下移动超过 200px，页面将重新加载。

var mouseY = 0;
var startMouseY = 0;
$('body').on('mousedown', function (ev) {
    mouseY = ev.pageY;
    startMouseY = mouseY;
    $(document).mousemove(function (e) {
        if (e.pageY > mouseY) {
            var d = e.pageY - startMouseY;
            console.log("d: " + d);
            if (d >= 200)
                location.reload();
            $('body').css('margin-top', d/4 + 'px');
        }
        else
            $(document).unbind("mousemove");


    });
});
$('body').on('mouseup', function () {
    $('body').css('margin-top', '0px');
    $(document).unbind("mousemove");
});
$('body').on('mouseleave', function () {
    $('body').css('margin-top', '0px');
    $(document).unbind("mousemove");
});