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

Question

我正在开发一个简单的Web应用程序，我想让用户能够使用下拉刷新的方式刷新页面，就像Android或iOS一样。

刷新只会重新加载页面，没有其他影响：

location.reload();

我想使用jQuery Mobile或Javascript。

- Yasser B.

---

你有读过相关资料吗？你尝试过其他代码吗？ - Sam

Answer 1

jsfiddle演示

这是在body上的，但你当然可以在其他元素中使用它。在这个例子中，html和body都具有100%的高度和不同的背景颜色，所以当拖动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");
});

- Samurai

---

太棒了！！！谢谢，但是有没有办法改成一个动画的旋转图标？ - Yasser B.

Answer 2

这是一个很棒的下拉刷新插件。

https://github.com/luis-kaufmann-silva/jquery-p2r

将JS添加到您的头部

脚本

<script>
    $(document).ready(function(){
        $(".scroll").pullToRefresh({
             refresh:200
        })
        .on("refresh.pulltorefresh", function (){
            location.reload();
        });
    });
</script>

<div class="scroll">
    <div class="refresh">
        Pull To Refresh 
    </div>
    <div class="container">
        content
    </div>        
</div>

对滚动类进行负边距上移以隐藏下拉刷新，将 refresh:200 更改为下拉刷新所需的时间。例如，目前设置为在下拉 200 像素后刷新。

- BritishSam

Answer 3

首先，您的应用程序可以检测滚动事件。请按照以下步骤操作。

$(window).scroll(function()
{
   if($(this).scrcollTop()>='somevalue may be your window height')
          location.reload();
});

我认为这对你来说会起作用。

- Murali

---

真的吗？这不会起作用。 - The concise