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

我正在开发一个简单的Web应用程序，我想给用户刷新页面的能力，使用下拉刷新类似于android或iOs的东西。如何使用jQuery Mobile或Javascript使Web应用程序下拉页面刷新

刷新它只会导致重新加载该页面没有别的：

location.reload();

我想使用jQuery Mobile的或Javascript。

来源

2015-05-06 Yasser B.

你读过关于这方面的任何内容吗？你有没有试过其他的代码？ – Sam

jsfiddle DEMO

这是body，但你可以拥有它，当然其他元素。在这个例子中，html和body分别与100% height和不同的background-color s，所以你会注意到拖曳身体时。鼠标向下移动的次数超过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"); 
});

来源

2015-05-06 09:35:38 Samurai

太神奇了！谢谢，但是有没有办法让脓液代替动画微调器？ –

增加了一个微调器。 – Samurai

这是拉一个伟大的插件刷新

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>

做一个负的margin-top上滚动类使得刷新被隐藏，更新刷新：200到需要多长时间才能刷新。例如，在其被设置为在其被拉动200个像素后刷新的时刻

来源

2016-08-09 14:43:05

首先，您的应用程序能够检测滚动事件。这样做。

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

我认为这会为你工作。

来源

2017-12-07 02:32:40 Murali

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

回答

相关问题