I recently encountered a need to do a page flipping effect similar to the raffle assistant

Just like this

——————————————————————————————–

When looking at this requirement, I have two ideas in mind:

  1. Much like a carousel component, try swiper

  2. Nested scrollView using views

The first option

After reviewing relevant documents and answers, it was found that swiper nested scrollView would have scroll penetration and stall problems on mobile devices. Test results are also, give up!

The second scheme is the conventional scheme, the key point of implementation is in the switching effect.

How do I drag elements from the first screen to the second screen

Here we can learn from the idea of virtual list, we can first get three screens of data and render, page stack: [first screen, second screen, third screen]

Page stack: [second, third, fourth screen]

In this way, every time you cross a page, pop off the data of the crossed page and add a new data.

——————————————————————————————–

So with the basic idea out of the way, the question is, how do you know when you can drag the next screen element

Since the view has a scrollView nested inside it, the first idea is to listen for an OnScroll event

However, this is highly not recommended

It will be very hard!

Because pageScroll events will be triggered throughout the scroll, if you put calculations in it, it will be computing all the time, seriously affecting performance

However, the scrollHeight field will be needed later in the calculation (to determine if you have reached the point where you can drag the page), so just put an assignment in the slide event

Once we get the scrollHeight, we calculate in touchStart whether we are in a position where we can drag the page (this.reachBottom).

——————————————————————————————–

For animations, it is recommended to update them directly using Transform: translateY, rather than setState, which can cause some lag

——————————————————————————————–

Finally, there is a sliding threshold that specifies how much the user can swipe to turn a page

——————————————————————————————–

End, scatter flowers