Endless horizontal PageControl

How-to Discussions
1

Hi everyone!

Is it possible to make endless PageControl ? Something very similar to this example ( https://www.fusetools.com/examples/endless-scroller ), but using PageControl with horizontal orientation instead of ScrollView as items container?

We with the team did not find a better solution for solving the problem of displaying an endless calendar. Main idea is that we need to display the “today” panel on the whole screen. When we swipe left and right, we need to show PageControl-like animation (with easing, snapping, overflow, etc…), but this list contains 365 elements, and it should be loaded dynamically, and next and prev items should be preloaded :frowning: . Then we try change observable list on-the-fly (via Navigated trigger, as infinitive list queue) PageControl element try to scroll back to one item (that is not a bug — ActiveIndex remains unchanged).

A possible solution may be reproduce all animations from PageControl in ScrollView via triggers, but have no idea how to solve this.

Please, help us, project deadline is near! :slightly_frowning_face:

2

Hi Nikita,

a PageControl with 365 preloaded pages does not sound too exciting. I would suggest approaching the challenge using SwipeGesture, SwipingAnimation and Swiped on a static page.

You could have an observable offset variable that is manipulated as you swipe left and right, and you could implement a stack of items just like in the endless scroller example.

You will want to make the preloaded stack reasonably long (28-31 items?), so that you can calculate the right points (on a month change?) where to replace the stack of items and reset the offset to 0 or 28/30/31, depending on swipe direction.

Hope this helps!

3

Take a look at the CalendarNav example which uses a Navigator. https://github.com/fusetools/fuse-samples/tree/master/Samples/UIStructure/CalendarNav

4

Uldis, thank you, it’s sounds like solution.

edA-qa mort-ora-y, thank you for reply, immersed the whole team in the study of the example…

I’ll come back later with a description of the solution that helped us. If someone has more ideas, — please welcome :slight_smile: