Element selector : spinning wheel

ionic-v1
1

Hi,

I would like to develop a spinning wheel selector, like we can see it on IOS date selector. I know there exists some library like Mobilscroll, but I’m not sure it is Ionic compliant.

Is there a way to set ion-scroll to achieve that ? Main features are :

  • Momentum (already ok)
  • Stop list on specific control height (?)
  • Magnetize list elements to this specific height (?)
  • Customize theme (css will do the job)

Thanks in advance for your comments

2

I’m trying with ionicscroll, to magnetize items, I need to get more events from scroll directive/service. I only have on-scroll. It would be great if we can have on-start-scrolling /on-scrollng/ on-end-scrolling.
What do you think ?

3

Hmm, well it looks like mobiscroll integrates with angular, so it should play well with angular.

Right now I don’t think these API’s are available. But what you could do is a select list, which would let the native control take over. That should give you the look and feel you want.

4

Thanks for your answer. I’m back on this part of the project (sorry for the delay of my response)

I was trying to deal with ion-content and “on-scroll-complete” attribute. The most tedious thing is that the selected value is not on top of the list, but at the middle and the effect to move the list to select a value (magnitzed item).

I may try mobiscroll and refund it if it does’nt fit to my requirements.

5

Don’t know if the component will be in here, but there is this github repo…

6

Hi,

In case someone would be interested, I’ve just made a simple “select wheel” using ion-scroll, it may need some improvements, but it’s a start: http://codepen.io/shaoner/pen/zvvQKr

Actually, I wanted to use this kind of select to do a cool & simple datepicker and couldn’t find any.

1 Like