Mobile Pull To Refresh

Mobile Pull To Refresh

  

Hello,

i have some mobile screens with the pull to refresh functionality. It works great, and i would actually like to give the same behaviour (the modal appearing just below the header) to other actions.

 Let's say, for example, i wanted to change page from a button, i wanted this to work exactly the way PullToRefresh works. That meaning that i would want the same icon to appear in the same place while it gets new information and renders the new screen. 

Is this possible and if so, can anyone give me some pointers as to how to achieve this?


Best Regards,

Bruno Gonçalves

Solution

Hi Bruno,

If you inspect the page you'll notice that this behavior is being controlled by adding and removing some classes at the body element. (ptr-refresh and ptr-loading)

If you want to replicate the behavior, you need to do something like the following:

  • Add a javascript node to add the necessary classes to the body, something like the following:
    • document.body.classList.add("ptr-refresh");
    • document.body.classList.add("ptr-loading");
  • Add the action logic
  • Remove the classes from the body element
    • document.body.classList.remove("ptr-refresh");
    • document.body.classList.remove("ptr-loading");

I think this will do the trick.

Let me know if it worked

Solution

Hi Henrique,

after posting the question i kept digging and found exactly what you described. the solution i came up with is exactly the one you described and can confirm that it absolutly works! thank you so much for the confirmation!

all i needed was to set the class of the body to ptr-loading.
it is worth noting, and i was not expecting this, even if after you set it to "ptr-loading" you navigate to a different page, the body of the new page will still have the ptr-loading, meaning that the spinner will still show on the new page, so you must explicitly remove the class after you finish loading whatever you are loading. 

Marking your answer as the solution since it perfectly explains the behaviour and how to achieve the desired effect.

Best Regards,

Bruno Gonçalves