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

Question

我正在开发一个简单的Web应用程序,我想让用户能够刷新页面,下拉刷新东西,比如android或iOs.

刷新它只会导致重新加载页面:

location.reload();

我想使用jQuery Mobile或Javascript.

Answer 1

jsfiddle演示

这是开启的，body但你当然可以在其他元素中使用它。在这个例子中html，并body与100% height不同background-colorS左右，你会拖着身体向下时发现。鼠标向下移动超过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");
});