Come eseguire il pull down Aggiornamento pagina su app Web utilizzando jQuery Mobile o Javascript

Question

Sto sviluppando una semplice applicazione Web, voglio dare la possibilità all'utente di aggiornare la pagina con una cosa di aggiornamento a tendina come Android o iOS.

l'aggiornamento sarà solo portare a ricaricare la pagina nient'altro:

location.reload(); 

Mi piacerebbe usare jQuery Mobile o Javascript.

Answer 1

jsfiddle DEMO

Questo è il body ma si può avere in altri elementi di corso. In questo esempio html e body sono con 100% height e diversi background-color s, quindi noterete quando trascinate il corpo verso il basso. Il mouse si sposta più in basso di 200px e la pagina viene ricaricata.

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"); 
}); 

Answer 2

Questo è un ottimo plugin per tirare per aggiornare

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

aggiungere le js alla testa

sceneggiatura

<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> 

fare un meno margin-top su la classe scroll per rendere il pull da aggiornare per essere nascosto, cambia refresh: da 200 a quanto tempo ci vuole per aggiornare. ad esempio, al momento il suo set si aggiorna dopo essere stato premuto per 200 pixel

Answer 3

Innanzitutto, l'applicazione è in grado di rilevare l'evento di scorrimento. Fai così.

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

Penso che questo funzionerà per voi.