Pull to Refresh component


#1

Hi,

My name in Martin.
I’m currently working on a project using Ionic, it’s been a great experience so far and I think it’s improving fast.
The community is also really helpful. This is my first post but I’ve been reading a lot here.
Thanks to all the team for your great work!

Anyway, for my app I needed a “pull to refresh” component that worked with native scrolling (using the latest beta) and with different styling that the one provided (more similar to android’s gmail, ie. without scrolling the list).
So I built a bower component, which can be reused. It’s not 100% finished, and any suggestions are welcome.

I know the “arrow” and “animation” examples are not very pretty and polished, they are WIP.

Demo: http://codepen.io/martinmoscovich/pen/MYGRoj

Cheers,
Martin


#2

Hi, @martinmoscovich

Your demo looks great, Good job!

Here i have a suggestion, I take this demo in my desktop browser, and if i try to drag and release, it refresh the list correctly and works well.
However, i think it is better to fix the mos-refresher at top when refresh event wasn’t complete and user try to scroll the list.

Good day


#3

Hi @santinowu,

Thanks for you feedback!
I think you have a point, I implemented your suggestion.
I also changed the hide animation to scale to zero (similar to gmail’s refresher), as it’s easier to handle when you scroll down (and looks nice as well).

The new version is on the same codepen: http://codepen.io/martinmoscovich/pen/MYGRoj

Let me know if it works ok for you.

Cheers,
Martin


#4

HI @martinmoscovich,

It works better after your great job. :smiley:

Best,
Santino


#5

Hi Martin!

Great job there with the custom component! I’m wondering if you’ve got a similar solution that works on Ionic 3.

Thanks!