How to make pull down Page refresh on Web app using jQuery Mobile or Javascript - Stack Overflow

admin管理员组

文章数量:1271756

I'm developing a simple web application, I want to give the ability to the user to refresh the page with pull down refresh thing like android or iOs.

the refresh it will only lead to reload the page nothing else :

location.reload();

I'd like to use jQuery Mobile or Javascript.

I'm developing a simple web application, I want to give the ability to the user to refresh the page with pull down refresh thing like android or iOs.

the refresh it will only lead to reload the page nothing else :

location.reload();

I'd like to use jQuery Mobile or Javascript.

• javascript
• jquery
• html
• jquery-mobile

Share Improve this question Follow asked May 6, 2015 at 8:25 Yasser B.Yasser B. 83577 gold badges2121 silver badges3434 bronze badges 1

• Have you read anything about this? Have you tried other code? – Sam Commented May 6, 2015 at 8:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

jsfiddle DEMO

This is on body but you can have it in other elements of course. In this example html and body are with 100% height and different background-colors so you'll notice when dragging the body down. Mouse moves down more than 200px and page will reload.

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

This is a great plugin for pull to refresh

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

add the js to your head

script

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

do a minus margin-top on the scroll class to make the pull to refresh to be hidden, change refresh:200 to how long the pull takes to refresh. e.g at the moment its set to refresh after its pulled for 200 pixels

First, your application is in position to detect the scrolling event. Do like this.

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

I think this is gonna work for you.

本文标签： How to make pull down Page refresh on Web app using jQuery Mobile or JavascriptStack Overflow