如何使用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應用程序下拉頁面刷新

回答

相關問題