Hey, i am trying to make clone of ios wheel date-time picker with js and tailwind. You can see the my goal design on uber app, if you tap on ‘now’ button on ride request screen you will see it, or here is a gif:
What i have done so far;
i am using nuxtjs, but i’ll try to explain what i have tried with vanillajs, i am kinda newbie, hope i can manage to explain.
- I made constant as VISIBLE_ITEMS_COUNT valued 7. Seemed like enough for my case.
- One more constant as ITEM_HEIGHT valued 40, since it will be on mobile devices only thought hardcoded item height would not be a problem that can help me calculate things with ease.
- I made ‘div’ since i know how many items will be visible and every item on the list has 40px of height that ‘div’ has a height of 7*40px so 280px. And that ‘div’ has overflow hidden property.
- I created an ul and 21 li’s inside. 21 is just 3 times visible item count. idk why choose 3 but it feels like just right size to manage the items as user interacts with it.
- Since i want to show the item in center of the list will be default selected one, i just gave the ul -400px of top position, so 10th index of the list will be in the center. at that point i got smth like what i wanted, here
- Then i added some mouse and touch listeners to imitate scroll, it was working actually, but i had problems with cycling back and forth as user scrolls to top or bottoms end of the items. tried too many things, came up to many ideas to fix this. But at this point i lost it, I don’t even know what i am doing now, just changing to code over and over again without having clear vision what i am doing.
- This is final result i have. here // new users can’t put 2 links in one post, I used that for next link. but you can see this result in the begining of the video below.
- After i saw that article thought maybe someone on this forum can give me an insight how achieve this goal. i can share the final code i have. Even tho i wanna keep going it feels like now i am cycling thru solutions i come up with over and over again and keep making same mistakes, i am missing smth,
is there anyone have any ideas how i can fix that?
Thanks guys, and thanks Kirupa for great articles.
)